时间戳

首页 > 解决方案 > 使所有 div 大小相同 CSS Flex

html - 使所有 div 大小相同 CSS Flex

问题描述

所以记录 div 必须始终保持相同的大小。

我想按列添加记录，但所有记录都具有相同大小的 div。这可能吗？所以我添加的越多，列的大小和调整大小将相同。

 |1| |2| |3|
 |6| | | | |

 |1| |2| |3|
 | | | | | |

 |1| |2| |3|
 | | | | | |

<wrapper>
  <div class="column1">
     <div class="record">1 <br> 6</div>
     <div class="record">1</div>
     <div class="record">1</div>
  </div>
  <div class="column2">
     <div class="record">2</div>
     <div class="record">2</div>
     <div class="record">2</div>
  </div>
  <div class="column3">
     <div class="record">3</div>
     <div class="record">3</div>
     <div class="record">3</div>
  </div>
 </wrapper>

标签： htmlcssflexboxresize

解决方案

拥有相同大小的列实际上就像设置display: flexon yourwrapper和flex-grow: 1on一样简单.column。这告诉列它们应该增长到填充可用空间。

如果你希望行之间有等距的空间，flexbox 会自动为你处理；您需要做的就是指定行应该占据100%其容器的高度height: 100%。

这可以在下面看到：

wrapper {
  display: flex;
}

.column {
  flex-grow: 1;
}

.record {
  height: 100%;
}
<wrapper>
  <div class="column">
    <div class="record">1 <br> 6</div>
    <div class="record">1</div>
    <div class="record">1</div>
  </div>
  <div class="column">
    <div class="record">2</div>
    <div class="record">2</div>
    <div class="record">2</div>
  </div>
  <div class="column">
    <div class="record">3</div>
    <div class="record">3</div>
    <div class="record">3</div>
  </div>
</wrapper>

添加更多列只是减少了每列之间的间隙，保持列彼此等距：

wrapper {
  display: flex;
}

.column {
  flex-grow: 1;
}

.record {
  height: 100%;
}
<wrapper>
  <div class="column">
    <div class="record">1 <br> 6</div>
    <div class="record">1</div>
    <div class="record">1</div>
  </div>
  <div class="column">
    <div class="record">2</div>
    <div class="record">2</div>
    <div class="record">2</div>
  </div>
  <div class="column">
    <div class="record">3</div>
    <div class="record">3</div>
    <div class="record">3</div>
  </div>
  <div class="column">
    <div class="record">4</div>
    <div class="record">4</div>
    <div class="record">4</div>
  </div>
  <div class="column">
    <div class="record">5</div>
    <div class="record">5</div>
    <div class="record">5</div>
  </div>
</wrapper>

推荐阅读