html - Flexbox 网格列 - 等高子元素

Question

我正在使用 flexbox 网格构建一个列布局，我希望每列的所有子元素的高度都相等。

当前的 HTML:

<div class="row middle-xs center-xs">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>
</div>

我也做了一个jsFiddle为此

正如您在 fiddle 中看到的那样，我希望所有蓝色框的高度相同，甚至 UL 列表的高度也相同，这样所有的起点都相同。

我试过使用 flex grow 但没有成功。任何想法如何使这项工作？

Answer 1

首先，您需要将标题与其他列分开。

我为此添加了一个带有 flex-box 的 div.row-eq-height。

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 0 auto;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row-eq-height [class*="col-"] {  
  border: 1px solid #ddd;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet"/>

<div class="row middle-xs center-xs">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <div class=" row-eq-height">
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="box"></div>
    <h3>Lorem ipsum</h3>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </div>
   </div>
</div>

工作 fiddle Demo