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

正如你在小提琴中看到的那样，我希望所有蓝色方框都具有相同的高度，甚至UL列表都是相同的高度，所以所有人都有相同的起点。

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

Answer 1

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

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

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

工作小提琴Demo

Answer 2

这里的解决方案https://jsfiddle.net/wgt6y13u/6/

刚刚为行的行使用了容器包装'box'，并为每个box元素添加了box-wrap类。这些新类只使用基本的flexbox对齐

.boxes {
  display: flex;
}
.box-wrap {
  align-self: flex-start
}

Flexbox网格列 - 相等高度的子元素

2 个答案: