Назад Вперед Зміст

Горизонтальне та вертикальне вирівнювання

Властивість align-items

Властивість align-items керує вирівнюванням елементів уздовж поперечної осі.

За замовчуванням встановлено значення stretch, яке розтягує всі flex-елементи так, щоб вони заповнили простір батьківського елемента по поперечній осі (cross axis). Якщо у батьківського елемента немає фіксованого розміру по цій осі, усі flex-елементи набудуть висоти найдовшого елемента. Саме тому в нашому першому прикладі всі колонки за замовчуванням отримали однакову висоту.

Значення center, яке ми використали у прикладі вище, змушує елементи зберігати власні розміри, але центровано розташовує їх по поперечній осі. Саме тому кнопки в поточному прикладі вирівняні по вертикалі.

Також є значення flex-start і flex-end, які вирівнюють усі елементи відповідно до початку та кінця поперечної осі.

Зробіть розмітку такої сторінки

Тепер додайте наступний рядок в кінець CSS-коду:

div { display: flex; align-items: center; justify-content: space-around; }

Ви можете перевизначити поведінку align-items для окремих flex-елементів, застосувавши до них властивість align-self. Наприклад, спробуйте додати ці рядки в код:

button:first-child { align-self: flex-end; }

Властивість order

У Flexbox також є можливість змінювати порядок розміщення flex-елементів без зміни їхнього порядку в HTML-коді. Це ще одна річ, яку неможливо реалізувати традиційними методами CSS.

Код дуже простий: спробуйте додати наступний CSS у кінець вашого прикладу:

button:first-child { order: 1; }

За замовчуванням усі flex-елементи мають значення order рівне 0.

Елементи з вищими значеннями order відображатимуться пізніше за ті, у яких значення менші.

Елементи з однаковим значенням order відображатимуться у початковому порядку. Наприклад, якщо у вас є чотири елементи зі значеннями 2, 1, 1 і 0 відповідно, порядок їх відображення буде: 4-й, 2-й, 3-й, потім 1-й.

Третій елемент з'являється після другого, оскільки має те саме значення order, але розміщений пізніше у HTML.

Приклад: flex-basis, flex-grow і flex-shrink

Назад Вперед Зміст

align-content: stretch;		Якщо сумарний розмір елементів уздовж поперечної осі менший за розмір контейнера вирівнювання, розмір кожного елемента з автоматичним розміром збільшується однаково (непропорційно), дотримуючись обмежень, заданих max-height/max-width (або аналогічними властивостями), так щоб сумарний розмір точно заповнив контейнер по поперечній осі.
align-content: start;		Елементи щільно розміщені один до одного, притиснуті до початку контейнера вирівнювання по поперечній осі.
align-content: center;		Елементи щільно розміщені один до одного по центру контейнера вирівнювання по поперечній осі.
align-content: space-between;		Елементи рівномірно розподілені всередині контейнера вирівнювання уздовж поперечної осі. Відстань між кожною парою сусідніх елементів однакова. Перший елемент вирівняний по початковому краю контейнера, останній — по кінцевому краю.
align-content: space-around;		Елементи рівномірно розподілені всередині контейнера вирівнювання уздовж поперечної осі. Відстань між кожною парою сусідніх елементів однакова. Порожній простір перед першим і після останнього елемента дорівнює половині простору між сусідніми елементами.
align-content: space-evenly;		Елементи рівномірно розподілені всередині контейнера вирівнювання уздовж поперечної осі. Відстань між кожною парою сусідніх елементів, початковим краєм і першим елементом, а також кінцевим краєм і останнім елементом абсолютно однакова.