Question

如果我有以下内容：

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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

Answer 1

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

该陈述中隐含的是每个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

Answer 2

您可以在父级中使用flex-wrap:wrap，在子级中使用flex-basis:50%

#flex {
  display: flex;
  flex-wrap: wrap;
  width: 500px /* choose your width here*/
    
}
#flex div {
  flex: 0 50%;
  border: 1px solid red;
  height: 100px;
  box-sizing: border-box
}

<div id="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 3

另一种插入中断的方法，在元素上使用margin-right，并在下面使用等效边距。

将容器悬停在其中以查看它是否适应新的宽度。

.container {
  width: 500px;
  height: 100px;
  border: solid 1px green;
  display: flex;
  flex-wrap: wrap;
  transition: width 3s;
}

.child {
  width: 150px;
  border: solid 1px red;
}

.child:nth-child(3) {
  margin-right: 150px;
}

.child:nth-child(4) {
  margin-left: -150px;
}

.container:hover {
    width: 700px;  
}

<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

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

3 个答案: