flexbox列中的等高部分？

Question

我正在使用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>

Answer 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>

Answer 2

你应该将.col设置为flex

.col{ display:flex; }

并且您的类列更好地命名为行