Есть ли объяснение данному поведению Flexbox?

Question

[Mors Clamor]

Добрый день! Вёрсткой раньше особенно не занимался, решил в очередной раз подтянуть, и наткнулся на вот такое поведение:

.list
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
 
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
    .list__item
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

Если задать display:flex обертке и дочерним элементам, то дочерние элементы независимо от наполнения станут одинаковой высоты (примут значение самого высокого брата). Объяснение крутится где-то на языке, но не могу сформулировать. Или же это вообще просто условность?

Заранее спасибо!

Answer 1

[Вадим]

Чтобы дочерние элементы были одной высоты (по максимальному в строке), им не нужно задавать display: flex.

Не понятно на самом деле какое нужно объяснение? Так работает flexbox. Точка.
Но это поведение можно изменить с помощью align-items, у которого по умолчанию значение stretch. Даже если оно явно не указано.

Comments

[Mors Clamor]

Раньше когда тренироровался верстать карточки товаров, они все время получались разной высоты, тогда непонятно почему это было)

[Сергей delphinpro]

Чтобы дочерние элементы были одной высоты (по максимальному в строке), им не нужно задавать display: flex.

Там, вероятно что-то типа такого

.list
  .list__item  
    .card

При этом .list__item будут одной высоты, но не имея визуальных стилей этого не видно, а карточки уже вне флекс потока и не выравниваются.

В этом случае задание display:flex для .list_item заставит дочерние .card занять всю высоту (т.к. align-items по умолчанию stretch).

[Ankhena]

Mors Clamor, либо были дочерние элементы по сценарию Сергея.
Либо вы дополнительно задавали дочерним элементам что-то типа height: 100%. А после этого они перестают растягиваться по stretch.