flexbox列内的高度相等？答案

【问题标题】：Equal height sections within flexbox columns?flexbox列内的高度相等？
【发布时间】：2018-11-08 14:31:09
【问题描述】：

我正在使用 flexbox 列进行非常基本的布局。下面有一个标题、图像和一个列表。列表必须有边框并且可以有不同的内容。是否可以在没有 JavaScript 的情况下根据最大的列表部分等高？还是需要用 JS 计算出最大截面高度并应用到其他人身上？

这就是我想要的：

这就是我所拥有的：

.columns {
  display: flex;
}

.col {
  margin-left: 20px;
}

ul {
  margin: 0; 
}

.list {
  padding: 24px;
  border: 1px solid blue;
}

<div class="columns">

  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

</div>

【问题讨论】：

简而言之，不，flexbox 不是为此而生的。你应该改用网格。
@Jorjon 谢谢。所以如果我无法访问列样式（它们来自外部库），我只留下了 javascript？

标签： html css flexbox

【解决方案1】：

由于两列都在同一个 flex 容器内，是的，列表框可以是相同的高度（基于最高的内容），只使用 CSS。

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

这里还有几个例子：

jsFiddle demo

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>        
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

你也应该将 .col 设置为 flex

.col{ display:flex; }

你的类列最好命名为行

【讨论】：