使不同Flexbox列中的行具有相同的高度

我想在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网格,并且我希望具有示例中的结构。因此,基本上所有行都应具有相同的高度,但应使用不同的“列”包装。

Example

使不同Flexbox列中的行具有相同的高度

milu4ever 回答:使不同Flexbox列中的行具有相同的高度

如果您从另一个方向来到这里并创建了flex行怎么办? https://codepen.io/panchroma/pen/qBBxpdx

然后,您可以根据需要调整弹性项目的宽度,以使您看起来好像有列?

HTML

    <div class="outer">
  <div class="row">
    <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
  <div class="row">
    <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
  <div class="row">
     <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
</div> 

** CSS **

.outer {
/*   display: flex; */
/*   height: 700px; */
/*   flex-direction:column; */
}

.row {
  display: flex;
/*   algin-items: stretch; */
  margin-right: 15px;
  background-color: green;
  width:180px;
  flex-wrap:wrap
}

.text {
  background: red;
  width: 50px;
  margin: 5px;
}  
  

好主意,但我需要这些行才能响应...

这是另一个想法: https://codepen.io/panchroma/pen/bGGLMwG

或option(3),a CSS table是否适合您的内容?

希望这会有所帮助!

本文链接:https://www.f2er.com/3165388.html

大家都在问