html均匀分布代码,html – 如何在flexbox中的行间均匀分布元素？

Assuming flex-direction: row and that three

该陈述中隐含的是每个div等于或小于完整行的宽度的1/3.

因此通常你的结果会说….

#flex {

display: flex;

flex-wrap: wrap;

background: orange;

}

#flex div {

border: 1px solid white;

height: 100px;

width: 33%;

background: rebeccapurple;

}

但是,从请求中你似乎希望在第二个元素之后打破行/行.

正如@Oriol here所解释的那样,这只能通过改变结构或使用聪明的方法插入不可见的实际或伪元素来强制换行来完成.

例如：

#flex {

display: flex;

flex-wrap: wrap;

background: orange;

justify-content: space-around;

}

#flex div {

border: 1px solid white;

height: 100px;

width: 33%;

background: rebeccapurple;

}

#flex::before {

content: "";

width: 100%;

order: 1;

}

div:nth-child(n + 3) {

order: 2;

}