Question

我试图使用justify-content来正确验证容器内的div，但是这个选项并没有按照我的预期运行。我希望容器内的div能够在我的示例的第二行保持顺序，如下所示：

1   2   3
4   5

而不喜欢：

1  2  3
4     5

＆＃13;

.container {
  display: flex;
  width: 1100px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.container > div {
  width: 330px;
  height: 125px;
  background-color: rgba(18, 28, 41, 0.50);
  border: 1px solid #325E82;
}

＆＃13;

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

＆＃13;

Codepen：https://codepen.io/anon/pen/pryWYZ

Answer 1

一种解决方案是利用伪选择器::after来创建一个假的“不可见的”＆＃39;与其他元素占据相同宽度的元素。与justify-content结合使用会导致现有的最终元素移动到中心：

＆＃13;

.container {
  display: flex;
  width: 1100px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container > div {
  width: 330px;
  height: 125px;
  background-color: rgba(18, 28, 41, 0.50);
  border: 1px solid #325E82;
}

.container::after {
  content: '';
  width: 332px; /* .container > div 'width' plus .container > div 'border' */
}

＆＃13;

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

＆＃13;

我还创建了此 here 的CodePen。

希望这有帮助！：）

Answer 2

Flexbox并非旨在创建完美的网格。这就是为什么在最后一行对齐flex项目没有自然的解决方案。你需要黑客才能让它发挥作用。

这些帖子对此进行了详细解释：

解决此问题的理想方法是从弹性布局切换到网格布局。使用CSS网格布局，可以更好地控制内容项的放置和大小调整。

.container {
  display: grid;
  grid-auto-rows: 125px;
  grid-template-columns: repeat(auto-fill, 330px);
  grid-gap: 10px;
  width: 1100px;
}

.container>div {
  background-color: rgba(18, 28, 41, 0.50);
  border: 1px solid #325E82;
}

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

有关CSS Grid的更多详细信息，包括上述属性的说明和浏览器支持数据，请参阅此帖子：CSS-only masonry layout but with elements ordered horizontally

Answer 3

另一种方法是在justify-content: flex-start;上设置.Container，并根据所需的列数限制正确子项目的边距，并限制子项的大小。

对于3列网格，如下所示：

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.item {
  background-color: gray;
  width: 100px;
  height: 100px;
  flex: 0 0 32%;
  margin: 1% 0;
  
  }
  
  .item:nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
  }

＆＃13;

<div class="container">
  <div class=item></div>
  <div class=item></div>
  <div class=item></div>
  <div class=item></div>
  <div class=item></div>
   
</div>

＆＃13;

包裹后将柔性物品保持在适当的列中

3 个答案: