17/32 Эксперименты с высотой

В задании 17/32 значения свойств align-content и align-items изначально установлены по умолчанию (stretch). При таких условиях ряды элементов растягиваются на весь флекс-контейнер, а сами элементы - на весь соответствующий ряд.

  1. Если установить высоту любого из элементов первого ряда более 20 пикселей (например, .simeon { height: 40px; } ), то происходит сразу два параллельных процесса:

а) Два других элемента первого ряда увеличиваются в высоте, вместе со всем первым рядом
б) Второй ряд, состоящий из единственного элемента .massimo становится ниже (как и сам элемент)

  1. Если установить такую же высоту для элемента второго ряда .massimo { height: 30px; }, то:

а) элемент .massimo закономерно станет ниже, а второй ряд в целом - выше
б) Первый ряд станет ниже

Как вообще объясняется подобное поведение а) и б) ?