因此,整个记录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>

最佳答案

拥有相同大小的列实际上就像在display: flex上设置wrapper以及在flex-grow: 1上设置.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>

10-05 20:40
查看更多