Flexbox 列中的顶行/项目高度相等[重复]

Question

我有一个列组件，位于柔性包装器内。多个列组件可以并排存在，并且每列包含多个 Flex 项目。

我需要每列中的顶部项目高度相等，模拟一行。我真的不想使用固定高度，因为如果用户调整浏览器字体大小或者内容移动到 CMS 并改变长度，它就会中断。有没有办法在 Flexbox 中做到这一点？如果没有，有没有办法使用 CSS Grid 或类似的方法来做到这一点？

例如：

html:

<div class="wrapper">
  <div class="column">
    <div class="topRow">
      Some content
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
  <div class="column">
    <div class="topRow">
      Some content which is a bit longer
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
  <div class="column">
    <div class="topRow">
      Some content
    </div>
    <p>Needs to align</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
  </div>
</div>

CSS：

.wrapper { 
  display: flex;
  max-width: 600px;
}

.column {
  flex: 1 1 0;
  border-right: 1px solid black;
  text-align: center;
}

Answer 1

希望这个方法对你有帮助。

table {
    width:100%;
    padding:0px 50px;
}
.column1 {
    background:red;
    height:50px;
}
.column2 {
    background:blue;
    height:50px;
}
@media (max-width:768px) {
    th,tr {
        width:100%;
        display: block;
        margin:10px 0px;
    }
}

<table class="table">
    <tr>
        <th class="column1">1</th>
        <th class="column2">1</th>
    </tr>
     <tr>
        <th class="column1">2</th>
        <th class="column2">2</th>
    </tr>
</table>