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

概述如果我有以下内容： <div id="flex"> <div></div> <div></div> <div></div> <div></div></div> 假设flex-direction：row和那三个< div>< / div>元素适合一行,浏览器是否可以在每一行显示2行,两行,而不是在一行上显示3,然后在下一行显示1？ Assuming flex-direction: 如果我有以下内容：

<div ID="flex">  <div></div>  <div></div>  <div></div>  <div></div></div>

假设flex-direction：row和那三个< div>< / div>元素适合一行,浏览器是否可以在每一行显示2行,两行,而不是在一行上显示3,然后在下一行显示1？

解决方法@H_419_17@

Assuming flex-direction: row and that three <div></div> elements fit on one line,is it possible for the browser to display 2 on each line,for two lines,instead of displaying 3 on one line,and then 1 on the next?

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

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

#flex {  display: flex;  flex-wrap: wrap;  background: orange;}#flex div {  border: 1px solID white;  height: 100px;  wIDth: 33%;  background: rebeccapurple;}

<div ID="flex">  <div></div>  <div></div>  <div></div>  <div></div></div>

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

正如@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;}

<div ID="flex">  <div></div>  <div></div>  <div></div>  <div></div>  </div

总结

以上是内存溢出为你收集整理的html – 如何在flexbox中的行间均匀分布元素？全部内容，希望文章能够帮你解决html – 如何在flexbox中的行间均匀分布元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。