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

Question

我想在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

Answer 1

如果您从另一个方向来到这里并创建了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是否适合您的内容？

希望这会有所帮助！