如何制作每行限制 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这样如果最后一个盒子还有剩余空间，它就会占据所有空间。

参考：

• 弹性盒
• 柔性包裹
• 弹性基础
• 弹性增长
• （额外）弯曲收缩

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

Answer 2

这是另一种布局灵活但仅限于 2 列的情况。在这种情况下，列的宽度不同。

请注意，这与网格不同，因为在这里您不需要媒体查询来拥有响应式布局（使用网格您需要在某个断点处切换到单列）。当列长度相等 (50/50) 时，此布局将会改变。细胞会跳跃并被一个放在另一个下面。事实上，这种布局就像您使用容器查询一样工作，这甚至更好:-)。

.container {
  display:flex;
  flex-wrap:wrap;
}
.inner:nth-child(2n+1) {
  flex:1 1 50%;
}
/* right column width
  this can however small or big or omitted */
.inner:nth-child(2n) {
  min-width: 100px;
}

/* just colors and stuff*/
.inner {
  padding:.5em;
  box-sizing: border-box;
}
.inner:nth-child(1) {
  background-color: lightpink;
}
.inner:nth-child(2) {
  background-color: lightgreen;
}
.inner:nth-child(3) {
  background-color: lightblue;
}
.inner:nth-child(4) {
  background-color: lightyellow;
}

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

请注意，我在上面使用了flex 简写属性。

您可能会问为什么它有效？第一个红色列需要 50% 的空间，如果有更多空间，它就会增长。下一列（绿色块）需要 100 像素。所以你已经有 50% + 100px。现在是下一个块（蓝色块），其宽度必须至少为 50%。50% + 100px + 50% 大于 100%，因此蓝色块移动到下一行。所以唯一的要求是块必须大于 1px（50% + 1px + 50% 仍然大于 100%）。干净简单。