使用flexbox每行排列2个项目

Imagine I have following markup

想象一下,我有以下标记

<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%
}

and due to certain reasons I can't change the width of the .item Can I arrange 2 items in each row by styling parent container .container, using flexbox or any other way?

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

2 个解决方案

#1

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

你可以给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>

#2

Assuming that the width property must not be changed, I can think of a few possible solutions, the first being fit-content which has amazingly poor browser support. The second, is use positioning, which is an equally bad idea due to its finicky nature and likelihood to fail on different screen sizes.

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

Now the last two, are very similar, one is to use two containers, give them display:inline; give them a limited width, and fill them with items. If you didn't notice, this is essentially a 2×1 table.

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

Lastly you could make a 2×1 table, and while it is probably the easiest solution here, it is a bad idea to get in the habit of using tables to position things other than forms and tables. However, it is an option that I will make available to you.

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

Good luck!