我想在Flexbox中创建三列(类似于定价计划)。
每列都有许多行,这些行具有不同的文本长度。有没有一种方法可以使每一列中的所有行都具有相同的高度?
<div class="outer">
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text others</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than dsd sdsd d d</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
</div>
.outer {
display: flex;
height: 700px;
}
.column {
display: flex;
algin-items: stretch;
margin-right: 15px;
background-color: green;
flex-direction: column;
}
.text {
background: red;
width: 50px;
margin: 5px;
}
我无法使用CSS网格,并且我希望具有示例中的结构。因此,基本上所有行都应具有相同的高度,但应使用不同的“列”包装。