使用flexbox每行排列2个项目

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 通过.container使用flexbox或任何其他方式设置父容器,在每行中排列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

以下解决方案对我有用

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

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

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