使用flexbox

Question

想象一下，我有以下标记

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

和风格

.item {
  width: 100%
}

由于某些原因我不能改变宽度 .item 我可以通过使用flexbox或任何其他方式设置父容器.container的样式来在每行中排列2个项目吗？

Answer 1

您可以在不触及的情况下将flex: 0 50%提供给儿童div。item

.item {
  width: 100%
}

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

.container>div {
  flex: 0 50%;
  /*demo*/
  border: red solid;
  box-sizing:border-box
}

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

Answer 2

假设不能更改width属性，我可以想到一些可能的解决方案，第一个是fit-content，它的浏览器支持非常糟糕。第二个是使用定位，这是一个同样糟糕的主意，因为它具有挑剔的性质，并且可能在不同的屏幕尺寸上出现故障。

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

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

祝你好运！

Answer 3

以下解决方案对我有用

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

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

示例：https://codepen.io/capynet/pen/WOPBBm