如何制作每行限制 2 个元素的弹性框？

Question

我需要制作一个最多包含 4 个 div 的表格。 但该表中的 div 始终应使用最大的可用空间。 并且一排应该包含不超过 2 个 div 例如，如果表包含 2 个 div，它应该看起来像这样

如果表格有 3 个 div，则如下所示：

如果包含 4 则应该是这样的

为了实现它，我编写了以下代码：

<div
  style={{
    height: '58vh', border: '1px solid #d9d9d9',
    borderRadius: '0px 0px 2px 2px',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
 >
   <div style={{background:'red', flex: 'auto', margin: '5px'}}
   <div style={{background:'green', flex: 'auto', margin: '5px'}}
   <div style={{background:'blue', flex: 'auto', margin: '5px'}}
   <div style={{background:'pink', flex: 'auto', margin: '5px'}}

 </div> 

但我在这里遗漏了一些东西。 对于 1 个 div 和 2 个 div，它按计划工作。 但对于更多.. 这是我 3 个 div 的结果 对于 4 个 div 谁能告诉我，我应该在这段代码中改变什么？

附言。请不要评判我画得不均匀的方子:)

Answer 1

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

.inner {
  flex-basis: 50%;
  flex-grow: 1;
}

.inner:nth-of-type(1) {
  background: red;
}

.inner:nth-of-type(2) {
  background: gold;
}

.inner:nth-of-type(3) {
  background: green;
}

.inner:nth-of-type(4) {
  background: blue;
}

<div class="container">
  <div class="inner">one</div>
  <div class="inner">two</div>
  <div class="inner">three</div>
  <div class="inner">four</div>
</div>

我使用以下步骤来实现您的结果。

1. 将包含内盒的容器设为flex。
2. 给容器flex-wrap: wrap，使没有位置的内盒在同一行，移动到下一行。
3. 将flex-basis: 50% 分配给内盒，使它们占据 50% 的可用空间。
4. 给里面的盒子flex-grow: 1，这样如果最后一个盒子还有空间，它就会把它全部占满。

参考资料：

• Flexbox
• flex-wrap
• flex-basis
• flex-grow
• （额外）flex-shrink

PS：尝试注释第四个内框，使第三个框占据整个水平空间。

Answer 2

使用Grid 是什么意思？

示例：

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;

这里是网格指南：https://css-tricks.com/snippets/css/complete-guide-grid/