使用弹性工具箱排列每行2个项目

想象一下我已经跟踪了标记

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

and style

.item {
width: 100%
}

由于某些原因，我不能改变宽度 .item 我可以安排2项在每一行的样式父容器 .container，使用软盒或任何其他方式？

227294 次浏览
小开
最佳答案

You can give flex: 50% to children divs without touching .item

.item {
width: 100%
}


.container {
display: flex;
flex-wrap: wrap;
}


.container > div {
flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
/*demo*/
box-shadow: 0 0 0 1px black;
margin-bottom: 10px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

小开

假设宽度属性不能改变，我可以想出几个可能的解决方案，第一个是 fit-content，它的浏览器支持非常差。第二，使用定位，这是一个同样糟糕的想法，因为它的过分挑剔的性质和失败的可能性，在不同的屏幕大小。

现在最后两个，是非常相似的，一个是使用两个容器，给他们 display:inline;给他们一个有限的宽度，并填写他们的项目。如果你没注意到，这实际上是一个2 × 1的表。

最后，你可以制作一个2 × 1的表格，虽然这可能是最简单的解决方案，但是养成使用表格来定位表格之外的东西的习惯是一个坏主意。然而，这是一个选择，我将提供给你。

Good luck!

小开

下面的解决方案对我很有效

.parent{
display: flex;
flex-wrap: wrap;
}


.child{
width: 25%;
box-sizing: border-box;
}

样本: https://codepen.io/capynet/pen/WOPBBm


提交答案