Flexbox -行内相同高度的列

Question

是否有可能使每一行内的列具有相同的高度？例如，使两个蓝色标题大小相同，依此类推

如果之前有人问过这个问题，我很抱歉，但是我在搜索时没有看到答案。

 <div class="row">
    <div class="column">
        <h2>heading</h2>
        <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
        <div class="block-2">Lorem ipsum dolor sit amet.</div>
      </div>

      <div class="column">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
        <div class="block-1">Lorem ipsum</div>
        <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
      </div>
    </div>

 .row {
  display: flex;
}

.column {
  display: flex;
  flex-direction: column;

  * {
    flex: 1;
  }
}

https://jsfiddle.net/vdLaq7t1/

Answer 1

您可以使用align-items: stretch (align-items的默认值)来完成它，但是您应该重新设计您的align-items结构。

​

.column {
  background: silver;
}

h2 {
  background: cornflowerblue;
  margin: 0;
}

.block-1 {
  background: tomato;
}

.block-2 {
  background: brown;
}

.row {
  display: flex;
  
  /* Not required because it's already the default value */
  align-items: stretch;
}

.row > *{
  flex: 1;
}

<div class="row">
    <h2>heading</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
</div>
<div class="row">
    <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
    <div class="block-1">Lorem ipsum</div>
</div>
<div class="row">
    <div class="block-2">Lorem ipsum dolor sit amet.</div>
    <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
</div>

​

Flexbox工作在X和Y轴。当您使用flex-direction: column时，您将主轴从X更改为Y。您可以使用justify-content属性管理主轴，用align-items属性管理次轴。

问题是，align-items使用stretch值，但justify-content不能。

因此，如果您想要的高度是相同的(Y轴)，您需要用align-items: stretch来拉伸它，但是align-items只在次轴上工作，所以在这种情况下，主轴需要是X轴，这意味着不能使用flex-direction: column来使它们保持相同的高度。

Answer 2

它可以通过许多技术来完成。例如，您可以将6 columns放在1行中。

​

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex-basis: 70%;
}

.column.sm {
  flex-basis: 30%;
}

.blue {
  background: blue;
}

.silver {
  background: silver;
}

.cornflowerblue {
  background: cornflowerblue;
}

<div class="row">
  <div class="column blue sm">heading</div>
  <div class="column blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</div>
  <div class="column silver sm"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quaerat, facilis qui placeat! Voluptatem reprehenderit similique rerum officia iste error ab, animi nobis quaerat culpa possimus, nisi laboriosam aliquid hic.</div>
  <div>Tempora eius eaque harum, temporibus sequi porro, minima quia, necessitatibus amet nisi unde reiciendis iure ipsa, facilis rerum qui dolores doloribus sed voluptatum! Dicta at, qui, exercitationem molestiae voluptas natus.</div></div>
  <div class="column silver">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto nemo ipsum voluptates mollitia eius enim, esse voluptatibus eaque doloremque vel asperiores quos unde similique rerum perspiciatis iure, ipsam eum soluta.</div>
  <div class="column cornflowerblue sm">lorem</div>
  <div class="column cornflowerblue"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore enim recusandae veniam optio delectus doloremque maiores quidem, impedit vel reprehenderit quam vitae, fugit atque assumenda molestiae debitis laboriosam blanditiis fugiat.</div>
  <div>Excepturi ea minima accusantium delectus totam quae fugiat, ex eos inventore deleniti odit, commodi eveniet, eum ullam consectetur ipsa quasi odio similique. Doloribus tempore accusantium soluta, id deserunt maxime accusamus.</div></div>
</div>

​