flex自动换行 带间距 自动换行样式算法

新版解决方案

解决方案模板
ps:
bug_01: 不可在 li 中使用 padding
bug_02: 未解决最后一行多余的问题

{BORDER} = 15
{SPACING} = 10
{X} = 3
ul.body {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    padding: {BORDER};
}
li {
    height: 80px;   // 请手动设置
    flex: 0 0 calc(100/{{X}}% - {X-1}*{SPACING}/{X}px);
    &:not(:nth-child({X}n)) {
        background: red;
        margin-right: {SPACING};
    }
    &:not(:nth-last-child(-n+{X})) {
        margin-bottom: {SPACING};
    }
}

less解决方案
ps: 修改变量即可

@BORDER: 15px;  // 边缘间距
@SPACING: 10px; // 元素间距
@X: 2;  // 每行元素个数
@liH: 150px;    // 元素高度
// 距离模板
ul.body {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    padding: @BORDER;  // 外侧距离
    >li {
        height: @liH;
        flex: 0 0 calc(100%/@X - @SPACING*((@X - 1)/@X));  // calc(x% - ypx) x: 100/[每行x个] y: 总间距和/[每行x个]
        &:not(:nth-child(@{X}n)) {  // [每行x个]n
            background: red;
            margin-right: @SPACING; // 横向间距
        }
        &:not(:nth-last-child(-n+@{X})) {  // -n+[每行x个]
            margin-bottom: @SPACING;    // 纵向间距
        }
    }
}

模型案例模板

ul.body {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    padding: 15px;  // 外侧距离
}
li {
    height: 80px;
    flex: 0 0 calc(33.3% - 6.6px);  // calc(x% - ypx) x: 100/[每行x个] y: 总间距和/[每行x个]
    &:not(:nth-child(3n)) {  // [每行x个]n
        background: red;
        margin-right: 10px; // 横向间距
    }
    &:not(:nth-last-child(-n+3)) {  // -n+[每行x个]
        margin-bottom: 10px;    // 纵向间距
    }
}

历史解决方案

自动换行 在 (总数%行数 != 0) 的情况下 向左对齐

.ul {
      display: flex;
      overflow: scroll;
      flex-wrap: wrap;
}
.ul li {
      flex: 0 0 x%;
} 
  • x = 100/<每行个数>
  • li标签 不可使用 padding 和margin 会导致格式被顶开(如果非要用 有一个display table 大概可以使padding margin变成 宽度内的)
posted @ 2020-07-17 14:17  qoon  阅读(461)  评论(0编辑  收藏  举报