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

Question

我需要制作一个 table，最多包含 4 个 div。但是 table 中的 div 总是应该使用可用的最大值 space。一行不应超过 2 divs 例如，如果 table 包含 2 个 div，它应该看起来像这样

如果 table 有 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 秒谁能告诉我我应该在此代码中更改什么？

PS。请不要评判我画得不均匀的方块:)

Answer 1

为此使用 Grid 是什么意思？

示例：

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

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

Answer 2

.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>

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

将包含内盒的容器设为flex。
给容器flex-wrap: wrap，让没有位置的内盒移到下一行。
将 flex-basis: 50% 给内框，使它们占据可用空间的 50% space。
给出内框flex-grow: 1，这样如果最后一个框还剩space，它会占据所有。

参考文献：

PS: 尝试注释第四个内框，使第三个框占据整个水平线 space.

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

How to make flex box with limit 2 elements per row?

html

javascript

css

flexbox

reactjs