Flexbox - 第一行有5列，第二行有6列

Question

我有一个使用Flexbox的布局，我试图弄清楚如何将我的11个元素分成2行。我遇到问题的地方是将元素分成2行，第一行有5列，第二行有6列，但所有11个元素的宽度相同。像这样：

这是我到目前为止所拥有的：

＆＃13;

＆＃13;

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
.ele {
  flex-grow:1;
  height:100px;
  width:calc(100% * (1/6) - 2px);
  border:1px solid black;
}

＆＃13;

<div class="container">
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以做的是使用伪元素。

在此，我将::before放在第一个ele之前，::after放在第五个ele之后（使用order属性），将它们放在一半ele的宽度，因此它们将最后6行推到下一行，同时将前5行作为中心。

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
.ele {
  height:100px;
  flex-basis: calc(100% / 6);
  border:1px solid black;
  box-sizing: border-box;
}
.container::after,
.container::before {
  content: '';
  flex-basis: calc(100% / 12);
}
.container::after {
  order: 1;
}
.ele:nth-child(n+6) {
  order: 2;
}

<div class="container">
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
</div>

Answer 2

不使用11项，而是使用12。

然后隐藏第一行的第6项。

确保隐藏项目的宽度至少为1px，以确保第7项包装到下一行。

添加宽度为1px的伪元素作为第一项，以便平衡行末尾的1px，并建立完美的居中。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.ele {
  height: 100px;
  width: calc(100% / 6);
  box-sizing: border-box;
  border: 1px solid black;
}

.hidden {
  visibility: hidden;
  width: 1px;
  border: none;
}

.container::before {
  content: "";
  width: 1px;
}

<div class="container">
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele hidden">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
  <div class="ele">Element</div>
</div>