Властивість align-items керує вирівнюванням елементів уздовж поперечної осі.
За замовчуванням встановлено значення stretch, яке розтягує всі flex-елементи так, щоб вони заповнили простір батьківського елемента по поперечній осі (cross axis). Якщо у батьківського елемента немає фіксованого розміру по цій осі, усі flex-елементи набудуть висоти найдовшого елемента. Саме тому в нашому першому прикладі всі колонки за замовчуванням отримали однакову висоту.
Значення center, яке ми використали у прикладі вище, змушує елементи зберігати власні розміри, але центровано розташовує їх по поперечній осі. Саме тому кнопки в поточному прикладі вирівняні по вертикалі.
Також є значення flex-start і flex-end, які вирівнюють усі елементи відповідно до початку та кінця поперечної осі.
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;
Елементи рівномірно розподілені всередині контейнера вирівнювання уздовж поперечної осі. Відстань між кожною парою сусідніх елементів, початковим краєм і першим елементом, а також кінцевим краєм і останнім елементом абсолютно однакова.
Зробіть розмітку такої сторінки
Тепер додайте наступний рядок в кінець 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.
