Значення центру властивості align-items

Значення center дозволяє вирівняти елементи по центру поперечної осі:

.parent { display: flex; flex-direction: row; align-items: center; /* центруємо по побічній осі */ }

Результат виконання коду:

Без высоти

Давайте спробуємо прибрати висоту нашим блокам. У цьому випадку їх висота формуватиметься їх вмістом, але центрування все одно буде:

Різна висота

Якщо вміст будь-якого елемента робить його висоту більше за інших, центрування все одно працюватиме:

Практичні задачі

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком: