Як працює flexbox
Технологія flexbox обіцяє врятувати нас від проблем лінійного CSS (таких як наприклад вертикальне вирівнювання).
У Firefox вже можна випробувати цю технологію. Однак освоєння нової моделі позиціонування може бути не таким простим.
Давайте подивимося як працює flexbox, як ми можемо використовувати його для більш простого позиционированния елементів.
Принцип позиціонування flexbox дозволяє гнучко і інтуїтивно будувати лейаута.
Щоб досягти цього, він дозволяє елементу контейнера самому вирішувати як розташувати дочірні елементи.
Все це добре звучить в теорії. Але давайте подивимося як це виглядає на практиці.
У цій статті ми розглянемо 5 найбільш поширених властивостей моделі flexbox. Ми розглянемо як можна використовувати їх і як будуть виглядати результати.
Властивість 1: display: flex
У нас є чотири різнокольорових елемента різних розмірів, все знаходяться в одному контейнері. За замовчуванням, властивість display для кожного елемента встановлено в block. Таким чином, кожному елементу відводиться рядок по всій ширині.
Для того щоб скористатися перевагою flexbox, необхідно повідомити про це контейнеру.
Не так вже й багато змін, елементи вишикувалися в лінію. Але за сценою відбулося набагато більше. Ці елементи отримали щось, зване flex context.
Тепер можна позиціонувати їх усередині цього контексту, витрачаючи на це набагато менше зусиль, ніж в традиційному CSS.
Властивість 2: flex-direction
У контейнера дві осі координат, які схематично виглядають так:
За замовчуванням дочірні елементи вишиковуються уздовж основної осі зліва направо. Саме тому елементи з попереднього прикладу розташувалися горизонтально як тільки ми прописали контейнеру display: flex.
Властивість flex-direction дозволяє змінювати цю поведінку.
Одне важливе зауваження: flex-direction: column НЕ вирівнює елементи вздовж другорядної осі (cross axis), а робить другорядну вісь основний.
Є ще два значення для цієї властивості: row-reverse і column-reverse.
Властивість 3: justify-content
Властивість justify-content управляє розміщенням елемента уздовж головної осі.
всього існує 5 значень для цієї властивості:
Різниця між значеннями space-around і space-between така: space-between виділяє рівну простір між елементами, а space-around рівне простір навколо кожного елемента, зрушуючи його таким чином від контейнера.
Запам'ятайте: justify-content діє тільки уздовж головної осі, а flex-direction перемикає осі. Це важливо для наступного властивості.
Властивість 4: align-items
Властивість align-items працює точно так само як і justify-content. тільки уздовж другорядною осі.
Всього існує 5 значень:
Перші три точно такі ж як і у justify-content. тому не будемо їх розглядати ще раз, а перейдемо відразу до двох інших.
stretch вирівнює елементи по висоті, а baseline по нижній частині параграфа.
Для значення stretch. також необхідно елементам встановити висоту в auto.
З приводу baseline. будьте уважні, якщо у вас не буде жодного параграфа в елементах, вони будуть вирівняні по нижній частині, ось так:
Для того щоб продемонструвати принцип головною і другорядною осей, давай скомбініруем властивості justify-content і align-items і подивимося як працює центрування різних значень властивості flex-direction.
Зі значенням row. елементи вирівнюються уздовж горизонтальної осі, column - вертикальної.
Властивість 5: align-self
Властивість align-self дозволяє вручну керувати вирівнюванням конкретного елемента.
Воно переопределяет значення властивості align-items. Всі значення точно такі ж як і у align-items. крім auto, яке встановлено за замовчуванням і означає що треба вирівнювати як зазначено у контейнера.
Давайте подивимося як це буде виглядати. Дамо align-self для перших двох елементів, а для інших застосуємо align-items: center і flex-direction: row.
висновок
Звичайно це був тільки огляд основних властивостей, але їх вже досить щоб вирішити більшість проблем з лейаутом.