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), но вам следует изменить структуру HTML.

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