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