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变成 宽度内的)