Flexbox

Flexbox – основна ідея

Flexbox – модуль, спрямований на забезпечення ефективнішого способу розміщення вирівнювання та розподілу простору між елементами в контейнері, навіть якщо їх розмір невідомий та/або динамічний.

Основна ідея:

• Батьківський елемент на який назначають властивість display: flex називається flex контейнер;
• Елементи, що в ньому розміщуються – flex-елементи;

Всередині flex-контейнера існує дві вісі:

• main axis (головна вісь) – вісь, вздовж якої розміщуються flex-елементи. За умовчуванням є горизонтальною, але напрям можна змінити властивістю flex-direction.
• cross aixs – (поперечна вісь) – перпендикулярна головній вісь. Напрям залежить від напряму головної вісі.

Flex-елементи розташовуються вздовж головної вісі в напрямку від main-start до main-end. Рядки flex-елементів заповнюються у flex-контейнері починаючи від cross-start до cross-end.

Властивості батьківського контейнеру

display

Визначає Flex контейнер. Вмикає flex контекст для всіх нащадків першого рівня. Може бути як блочним так і інлайновим.

.flex-container {
    display: flex | inline-flex;
}

flex-direction

Встановлює основну вісь, визначаючи напрям flex-елементів, розташованих в середині flex-контейнеру.

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
}

• row – за напрямом тексту. Використовується за умовчуванням.
• row-reverse – аналогічна значенню row але точки main-start та main-end поміняні місцями.
• column – аналогічно row але вертикально.
• column-reverse – аналогічно row-reverse але вертикально.

Flex-елементи за умовчуванням розміщаються згідно двох правил:

1. По головній вісі – починаючи від main-start;
2. По поперечній вісі – розтягуючись, щоб заповнити весь контейнер;

flex-wrap

За умовчуванням у flexbox елементи будуть намагатись розташуватись в одному ряді, але за допомогою властивості flex-wrap можна дозволити їм переходити на новий рядок.

.flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap – flex-елементи знаходяться в на одному рядку.
• wrap – flex-елементи переноситимуться на декілька рядків починаючи від main-start.
• wrap–reverse – flex-елементи переноситимуться на нові рядки знизу вгору.

justify-content

Властивість визначає вирівнювання flex-елементів вздовж головної вісі.

.flex-container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right... + safe | unsafe;
}

 

• flex-start – flex-елементи згруповані біля main-start;
• flex-end – flex-елементи згуртовані біля main-end;
• center – flex-елементи розташовуються посередені
• space-between – flex-елементи розташовані рівномірно вздовж головної вісі. Перший елемент знаходиться на початку ряду, останній – в кінці.
• space-around – flex-елементи розташовані рівномірно вздовж головної вісі з однаковим простором між ними. Оскільки кожен елемент має однаковий вільний простір з обох сторін, крайні елементи будуть знаходитись ближче до краю flex-контейнеру, ніж до сусіднього flex-елементу.
• space-evenly – flex-елементи розташовані рівномірно вздовж головної вісі. Відстань між елементами однакова.

align-items

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

.flex-container {
    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +... safe | unsafe;
}

• stretch – розтягнути flex-елемент по вертикалі для заповнення контейнеру. Використовується за умовчуванням.
• flex-start – елементи розташовуються на початку поперечної вісі;
• flex-end – елементи розташовуються в кінці поперечної вісі;
• center – flex-елементи відцентровані по поперечній вісі;
• baseline – flex-елементи вирівняні по їх базовій лінії

align-content

Властивість вирівнює рядки в межах flex-контейнеру коли є додатковий простір на поперечній вісі подібно тому, як це робить justify-content по головній вісі. Властивість не працює, коли є лише один рядок flex-елементів.

.flex-container {
    align-content: flex-start | flex-end | center | space-between | space-around
        | space-evenly | stretch | start | end | baseline | first baseline |
        last baseline +... safe | unsafe;
}

• flex-start – flex-елементи згуртовані на початку контейнеру.
• flex-end – flex-елементи згуртовані у кінці контейнеру.
• center – flex-елементи відцентровані по центру контейнера.
• space-between – flex-елементи розташовані рівномірно. Перший елемент знаходиться на початку ряду, останній – в кінці.
• space-around – flex-елементи розташовані рівномірно з однаковим простором між ними.
• space-evenly – flex-елементи розташовані рівномірно. Відстань між елементами однакова.
• stretch – елементи розтягуються щоб зайняти вільний простір.

gap

Властивість встановлює відступи між flex-елементами, але не вздовж межі flex-контейнеру.

.flex-container {
    gap: row-gap column-gap;
}

Можна вказувати окремо відступи між стовбцями та рядками використовуючи властивості row-gap та column-gap.

Властивості для flex-елементів

order

За умовчуванням flex-елементи розміщуються в порядку відповідно html документу, при цьому кожен елемент має індекс 0. За допомогою властивості order можна керувати самостійно порядком їх відображення в межах flex-контейнеру.

.flex-item {
    order: <integer>; /* default is 0 */
}

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

flex-grow

Властивість визначає скільки вільного простору flex-контейнера буде надано flex-елементу. За умовчуванням – 0. Тобто якщо ширина flex-контейнера більша ніж загальна ширина всіх його flex-елементів, вільний простір залишиться не зайнятим, а елементи будуть розміщуватись відповідно до значення властивості justify-content.

Якщо всі перші нащадки flex-контейнера мають однакове значення flex-grow – вільний простір буде розділено між ними рівномірно. В іншому випадку він буде розподілений відповідно до встановлених коефіцієнтів.

Від’ємні значення не підтримуються.

flex-shrink

Встановлює коефіцієнт стиснення flex-елементів по відношенню до сусідніх елементів, якщо в рядку недостатньо місця. За умовчуванням має значення 1. При значенні 0 елемент не стискається. Від’ємні значення не підтримуються.

flex-basis

Задає базовий розмір flex-елемента по головній вісі. Параметри:

• Число – якщо дозволяє розмір батьківського контейнеру, береться задане значення. При перевищені розміру батьківського контейнеру, та при flex-shrink = 1 утискається в нього. Враховуються значення max-width та min-width. Якщо перше менше flex-basis – flex-елемент бере його розмір. Якщо друге більше flex-basis – flex-елемент також бере його розмір.
• auto – бере значення width, якщо задане, або розмір вмісту – якщо ні.
• content – бере за основу розмір вмісту. Ігнорується значення

flex

Скорочення для flex-grow, flex-shrink и flex-basis.

.flex-item {
    flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" > ];
}

За умовчуванням – flex: 0 1 auto;

Джерела:

CSS-TRICKS

MDN Web Docs