在包装后将Flex项目保持在适当的列中
我试图使用justify-content来正确地在我的容器中对齐div，但是此选项无法按预期方式工作。我想我的div的容器内，以维持秩序我的例子中的第二行中，像这样：在包装后将Flex项目保持在适当的列中
1 2 3
4 5
，而不是像：
1 2 3
4 5
.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;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
一个解决方案是使用伪选择器::after以创建与其他元素占据相同宽度的假“不可见”元素。在与justify-content组合，这将导致现有的最后一个元素被移动到中心：
.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' */
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>我也创造了本here一个CodePen。
希望这会有所帮助！ :)
但是，如果我将例如6个元素+之后 - 它会使新行... – Src
这不是一个问题，考虑到::后'具有零高度'而不是'内容'。 [**这个例子**]（https://codepen.io/Obsidian-Age/pen/yoOPOZ）表明，添加第六个元素将没有可见的差异。我已经将背景设置为红色来帮助说明这一点:) –
@ObsidianAge你最好使用'330px'作为伪元素的'width'并应用'*，*：before，*：{box-sizing：border-box ; }'摆脱这个讨厌的计算。 –
它周围的另一种方式是对.Containerjustify-content: flex-start;，并根据列的所需数量和孩子的限制大小上正确子项中指定的余量。
对于3列网格，像这样：
.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%;
}
<div class="container">
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>在弹性项目上使用百分比边距（或填充）不是一个好主意。目前，它们在主要浏览器中的呈现方式不同。例如，您的解决方案在Chrome中运行，但在Firefox中失败。 https://*.com/q/36783190/3597276 –
Flexbox的目的不是要建立完善的网格。这就是为什么对齐最后一行的弹性项目没有自然的解决方案。你需要黑客才能使它工作。
对此进行了详细的这些职位说明：
- Is it possible for flex items to align tightly to the items above them?
- Targeting flex items on the last row
- Properly sizing and aligning the flex item(s) on the last row
解决这一问题将是从弯曲布局，电网开关的理想方法布局。使用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电网的详细信息，包括上面的属性和浏览器支持数据的解释，看到这个帖子：CSS-only masonry layout but with elements ordered horizontally
您应该使用CSS格这一点。Flex用于以1维方式显示项目，并且您希望将项目对齐为2维。 – Frilox
@Frilox谢谢你的建议！刚刚检查了什么CSS网格，它似乎是这样的任务真棒。要重新安装我的代码，使用网格：D – Src