Флекс елементів. Практичне застосування FlexBox. Речі, які слід пам'ятати

Як працює CSS Flexbox: наочне введення в систему компонування елементів на веб-сторінці

Flexbox покликаний врятувати нас від неприємних моментів чистого CSS (наприклад, від вертикального вирівнювання), і він чудово справляється зі своїм завданням. Але розібратися в принципах його роботи часом буває складно, особливо якщо ви новачок.

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

Звучить непогано, але давайте подивимося, чи воно гладко на практиці. У цій статті ми вивчимо 9 найпопулярніших властивостей Flexbox, розберемося, що вони роблять, та як вони насправді працюють.

Display: Flex

Ось приклад сторінки:

У нас є 4 різнокольорових div'а різних розмірів, які знаходяться всередині сірого div'а. Кожен div'а має властивість display: block . Тому кожен квадрат займає всю ширину рядка.

Щоб почати працювати з Flexbox, нам потрібно зробити наш контейнер flex-контейнером. Робиться це так:

#container (display: flex;)

Начебто нічого особливо й не змінилося - div'и лише встали в ряд. Але ви зробили щось справді потужне. Ви дали вашим квадратам класну властивість, яка називається “flex-контекст”.

Flex Direction

У flex-контейнера є дві осі: головна вісь та перпендикулярна їй.

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

#container ( display: flex; flex-direction: column; )

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

Є ще кілька властивостей для flex-direction: row-reverse і column-reverse .

Justify Content

Justify-content відповідає за вирівнювання елементів по головній осі.

Повернемося до flex-direction: row.

#container ( display: flex; flex-direction: row; justify-content: flex-start; )

Justify-content може набувати 5 значень:

1. flex-start;
2. flex-end;
3. center;
4. space-between;
5. space-around .

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

Align Items

Якщо justify-content працює з головною віссю, то align-items працює з віссю, перпендикулярною до головної осі.

Повернемося назад до flex-direction: row та пройдемося по командам align-items:

1. flex-start;
2. flex-end;
3. center;
4. stretch;
5. Baseline.

Варто зауважити, що для align-items: stretch висота квадратів повинна дорівнювати auto . Для align-items: baseline теги параграфа прибирати не потрібно, інакше вийде так:

Щоб краще розібратися в тому, як працюють осі, об'єднаємо justify-content з align-items і подивимося, як працює вирівнювання по центру для двох властивостей flex-direction:

Align Self

Align-self дозволяє вирівнювати елементи окремо.

#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Only this square will be centered.

Давайте для двох квадратів застосуємо align-self, а для інших застосуємо align-items: center і flex-direction: row.

Flex-Basis

Flex-basis відповідає за початковий розмір елементів, перш ніж вони будуть змінені іншими властивостями Flexbox:

Flex-basis впливає розмір елементів уздовж головної осі.

Давайте подивимося, що станеться, якщо ми змінимо напрямок головної осі:

Зауважте, що нам довелося змінити висоту елементів. Flex-basis може визначати як висоту елементів, і їх ширину залежно від напрямку осі.

Flex Grow

Ця властивість трохи складніша.

Для початку давайте поставимо нашим квадратикам однакову ширину в 120px:

За замовчуванням значення flex-grow дорівнює 0. Це означає, що квадратам заборонено рости (займати місце в контейнері).

Спробуємо задати flex-grow 1 для кожного квадрата:

Квадрати зайняли місце в контейнері. Значення flex-grow анулює значення ширини.

Але тут виникає одне питання: що означає flex-grow: 1?

Спробуємо задати flex-grow рівним 999:

І… нічого не сталося. Так вийшло через те, що flex-grow набуває не абсолютних значень, а відносних.

Це означає, що не важливо, яке значення у flex-grow, важливо, яке воно по відношенню до інших квадратів:

Спочатку flex-grow кожного квадрата дорівнює 1, у сумі вийде 6. Отже, наш контейнер поділений на 6 частин. Кожен квадрат займатиме 1/6 частину доступного простору в контейнері.

Коли flex-grow третього квадрата стає рівним 2, контейнер ділиться на 7 частин (1+1+2+1+1+1).

Тепер третій квадрат займає 2/7 простору, решта – по 1/7.

Варто пам'ятати, що flex-grow працює тільки для головної осі (поки ми не змінимо її напрямок).

Flex Shrink

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

Flex-shrink використовується, коли елементи не вміщуються у контейнер.

Ви визначаєте, які елементи мають зменшитись у розмірах, а які – ні. За замовчуванням значення flex-shrink для кожного квадрата дорівнює 1. Це означає, що квадрати стискатимуться, коли контейнер зменшуватиметься.

Задамо flex-grow та flex-shrink рівними 1:

Тепер давайте поміняємо значення flex-shrink для третього квадрата на 0. Йому заборонили стискатись, тому його ширина залишиться рівною 120px:

Варто пам'ятати що flex-shrink ґрунтується на пропорціях. Тобто, якщо у квадрата flex-shrink дорівнює 6, а в інших він дорівнює 2, то це означає, що наш квадрат буде стискатися втричі швидше, ніж інші.

Flex

Flex замінює flex-grow, flex-shrink та flex-basis.

Значення за замовчуванням: 0 (grow) 1 (shrink) та auto (basis) .

Створимо два квадрати:

Square#one ( flex: 2 1 300px; ) .square#two ( flex: 1 2 300px; )

У обох квадратів однаковий flex-basis. Це означає, що вони будуть шириною в 300px (ширина контейнера: 600px плюс margin і padding).

Але коли контейнер почне збільшуватися в розмірах, перший квадрат (з великим flex-grow) буде збільшуватися вдвічі швидше, а другий квадрат (з найбільшим flex-shrink) буде стискатися вдвічі швидше.

Як речі ростуть і стискаються

Коли збільшується перший квадрат, він не стає вдвічі більше другого квадрата, і коли зменшується другий квадрат, він не стає вдвічі меншим за перший. Це відбувається через те, що flex-grow та flex-shrink відповідають за темпи зростання та скорочення.

Трохи математики

Початковий розмір контейнера: 640px. Віднімемо по 20px з кожної сторони для padding, і у нас залишиться 600px, якраз для двох квадратів.

Коли ширина контейнера дорівнює 430px (втрата в 210px), перший квадрат (flex-shrink: 1) втрачає 70px. Другий квадрат (flex-shrink: 2) втрачає 140px.

Коли контейнер стискається до 340px, ми втрачаємо 300px. Перший квадрат втрачає 100px, другий - 200px.

Те саме відбувається і з flex-grow.

про автора: Рейчел Ендрю - не тільки головний редактор журналу Smashing Magazine, але й веб-розробник, письменник та спікер Вона авторка низки книг, зокрема The New CSS Layout, один із розробників системи керування контентом Perch . Пише про бізнес та технології на своєму сайті rachelandrew.co.uk.

Короткий зміст: у цій статті ми розглянемо властивості вирівнювання у Flexbox та деякі основні правила, як працює вирівнювання по основній та поперечній осях.

Значення так само працюють по вертикалі, тобто якщо flex-direction застосовується для column . Правда, у вас у стовпці може не виявитися вільного місця для розподілу, якщо не додати висоту або block-size контейнера, як у цьому демо.

Вирівнювання по осях за допомогою align-content

Потім я можу застосувати align-content з будь-яким із значень .

Якщо як flex-direction вказано column , то align-content працює як у прикладі .

Як і у випадку з justify-content, ми працюємо з групою рядків і розподіляємо вільний простір.

Властивість по place-content

Container (place-content: space-between stretch; )
Відповідає цьому:

Container ( align-content: space-between; justify-content: stretch; )
А такий код:

Container (place-content: space-between; )
Рівноцінний наступному:

Container ( align-content: space-between; justify-content: space-between; )

Вирівнювання по осях за допомогою align-items

Як варіант, її можна визначити властивістю height у контейнері:

Чому елементи розтягуються до розміру найвищого елемента - тому що початковим значенням параметра align-items є stretch . Елементи розтягуються по поперечній осі до розміру контейнера у цьому напрямку.

Зверніть увагу, що у багаторядковому контейнері кожен рядок діє як новий контейнер. Найвищий елемент у цьому рядку визначатиме розмір всіх елементів у цьому рядку.

Крім початкового значення stretch можна присвоїти елементам align-items значення flex-start , в цьому випадку вони вирівнюються по початку контейнера і більше не розтягуються по висоті.

Значення flex-end переміщує в кінець контейнера по поперечної осі.

Якщо ви використовуєте значення center, то елементи центруються відносно один одного:

Ми також можемо вирівняти їх за базовою лінією. Це гарантує вирівнювання тексту з одного підставі, на відміну вирівнювання полів навколо тексту.

Всі ці варіанти можна спробувати в демо.

Індивідуальне вирівнювання за допомогою align-self

У наступному прикладі в контейнері використовується align-items для вирівнювання всієї групи по центру, а також align-self для першого та останнього елементів.

Чому немає justify-self?

Також може бути корисно подумати, як justify-content і align-content працюють у CSS Grid Layout. У Grid ці властивості використовуються для розподілу вільного простору в grid-контейнері між grid-доріжками. Тут також ми беремо групу доріжок - і з допомогою цих властивостей розподіляємо з-поміж них вільний простір. Оскільки ми оперуємо в групі і Grid, і Flexbox, то не можемо взяти окремий елемент і зробити з ним щось інше. Тим не менш, є спосіб отримати оформлення макета, яке хочуть верстальники, коли говорять про властивість self на головній осі. Це використання автоматичних полів.

Використання автоматичних полів на основній осі

Автоматичні поля дуже добре працюють у Flexbox для вирівнювання окремих елементів або груп елементів на головній осі. У наступному прикладі показано типовий випадок. Є панель навігації, елементи відображаються як рядки і використовують початкове значення justify-content: start . Я хочу, щоб останній пункт відображався окремо від інших наприкінці рядка – за умови, що у рядку достатньо місця для цього.

Беремо цей елемент і вказуємо властивості margin-left значення auto . Це означає, що поле намагається отримати якнайбільше місця ліворуч від елемента, тобто елемент виштовхується до правої межі.

Якщо ви використовуєте автоматичні поля на головній осі, то justify-content перестане діяти, тому що автоматичні поля займуть весь простір, який інакше розподілявся б за допомогою justify-content .

Запасне вирівнювання

У поточній специфікації ви не можете змінити запасне вирівнювання. Є примітка до специфікацій, яка дозволяє вказівки довільного запасного варіанту в майбутніх версіях.

Безпечне та небезпечне вирівнювання

У наступному коді останній елемент занадто широкий для контейнера, а при небезпечному вирівнюванні та гнучкому контейнері в лівій частині сторінки елемент обрізається, оскільки переповнення виходить за межі сторінки.

Container ( display: flex; flex-direction: column; width: 100px; align-items: unsafe center; ) .item:last-child ( width: 200px; )


Безпечне вирівнювання запобігає втраті даних, переміщуючи переповнення на інший бік.

Container ( display: flex; flex-direction: column; width: 100px; align-items: safe center; ) .item:last-child ( width: 200px; )


Ці ключові словапоки підтримуються не всіма браузерами, але показують, як специфікації Box Alignment додають контролю у Flexbox.

Висновок

• justify-для основних осей, а align-для поперечних;
• для align-content і justify-content потрібен вільний простір;
• властивості align-content і justify-content застосовуються до елементів групи, розподіляючи простір між ними. Не можна вказувати вирівнювання окремого елемента, тому властивість -self відсутня;
• якщо хочете вирівняти один елемент або розбити групу по осі, використовуйте автоматичні поля;
• align-items встановлює однакові властивості align-self для всієї групи. Використовуйте align-self для дочірнього елемента групи, щоб встановити значення індивідуально.

Якщо говорити коротко, то верстка із Flexbox дає нам прості рішенняколись непростих завдань. Наприклад, коли потрібно вирівняти елемент по вертикалі, або притиснути підвал до низу екрана, або просто вставити кілька блоків в один ряд, так щоб вони займали весь простір. Подібні завдання вирішуються без flex. Але зазвичай ці рішення більше схожі на «милиці» - прийоми використовувати css не за призначенням. Тоді як із flexbox такі завдання вирішуються саме так, як замислює flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетів з гнучкими блоками), коротко flexbox, створена, щоб прибрати недоліки при створенні різних HTML конструкцій, у тому числі адаптованих під різну ширину і висоту, і зробити верстку логічною і простою. А логічний підхід, як правило, працює в несподіваних місцях, там де результат не перевірявся - логіка наше все!

Flexbox дозволяє елегантно контролювати самі різні параметриелементів усередині контейнера: напрямок, порядок, ширину, висоту, вирівнювання вздовж та поперек, розподіл вільного місця, розтягування та стиснення елементів.

Базові знання

FlexBox складається з Контейнера та його Дочірніх елементів (items) (гнучких елементів).

Для включення flexbox, будь-кому HTML елементудостатньо привласнити css властивість display:flex; або display: inline-flex; .

Після включення flex властивості, усередині контейнера створюються дві осі: головна та поперечна (перпендикулярна (⊥), крос вісь). Усі вкладені елементи (першого рівня) шикуються по головній осі. За замовчуванням головна вісь горизонтальна і має напрямок ліворуч (→), а крос вісь відповідно вертикальна і спрямована зверху вниз (↓).

Головну і крос осі можна поміняти місцями, тоді елементи будуть розміщуватися зверху вниз (↓) і коли перестануть вміщатися у висоту, то будуть рухатися зліва направо (→) - тобто осі просто помінялися місцями. При цьому початок і кінець розташування елементів не змінюється – змінюються лише напрямки (осі)! Саме тому потрібно уявляти осі всередині контейнера. Проте не треба думати, що є якісь там «фізичні» осі, і вони на щось впливають. Ось тут - це тільки напрямок руху елементів усередині контейнера. Наприклад, якщо ми вказали вирівнювання елементів по центру основної осі і потім змінили напрямок цієї основної осі, то зміниться і вирівнювання: елементи були в середині по горизонталі, а стали в середині по вертикалі... Див. приклад.

Ще однією важливою особливістю Флекс-бокс є наявність рядів у поперечному напрямку. Щоб зрозуміти про що мова, давайте уявимо, що є головна горизонтальна вісь, багато елементів і вони не «лізуть» у контейнер, тому переходять на інший ряд. Тобто. контейнер виглядає так: контейнер, усередині нього два ряди, у кожному ряді по кілька елементів. Уявили? А тепер запам'ятайте, що вирівнювати по вертикалі ми можемо не лише елементи, а й лави! Як це працює добре видно з прикладу до властивості. А ось так це виглядає схематично:

CSS властивості, які можуть впливати на модель побудови макета: float, clear, vertical-align, columns не працюють у flex конструкції. Тут використовується інша модель побудови макета, і ці css властивості просто ігноруються.

CSS властивості Flexbox

Flexbox містить різні css правила для керування всією flex конструкцією. Одні потрібно застосовувати до основного контейнера, інші до елементів цього контейнера.

Для контейнера

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

• flex- Елемент розтягується на всю ширину і має свій повний простір серед навколишніх блоків. Відбувається перенесення рядків на початку та в кінці блоку.
• inline-flex- Елемент обтікається іншими елементами. У цьому його внутрішня частина форматується як блоковий елемент, а сам елемент - як інтегрований.

flex і inline-flex відрізняються тим, що по-різному взаємодіють з навколишніми елементами, подібно display:block і display:inline-block .

Змінює напрямок головної осі контейнера. Поперечна вісь змінюється відповідно.

• row (default)- напрямок елементів зліва направо (→)
• column- Напрямок елементів зверху вниз (↓)
• row-reverse- Напрямок елементів справа наліво (←)
• column-reverse- Напрямок елементів знизу вгору ()

Керує перенесенням елементів, що не поміщаються в контейнер.

• nowrap (default)- Вкладені елементи розташовуються в один ряд (при direction=row) або в одну колонку (при direction=column) незалежно від того, поміщаються вони в контейнер чи ні.
• wrap- включає перенесення елементів на наступний ряд, якщо вони не розміщуються у контейнері. Так включається рух елементів поперечної осі.
• wrap-reverse- теж, що wrap тільки перенесення буде не вниз, а вгору (у зворотному напрямку).

Поєднує обидві властивості flex-direction та flex-wrap. Вони часто використовуються разом, тому щоб писати менше коду було створено властивість flex-flow.

flex-flow приймає значення цих двох властивостей, розділені пробілом. Або можна вказати одне значення будь-якої якості.

/* тільки flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* тільки flex-wrap */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* відразу обидва значення: flex-direction та flex-wrap */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

Вирівнює елементи з основної осі: якщо direction=row, то з горизонталі, і якщо direction=column, то з вертикалі.

• flex-start (default)- Елементи будуть йти з початку (в кінці може залишитися місце).
• flex-end- елементи вирівнюються до кінця (місце залишиться на початку)
• center- по центру (місце залишиться зліва та права)
• space-between- крайні елементи притискаються до країв (місце між елементами рівномірно розподіляється)
• space-around- вільний простір рівномірно розподіляється між елементами (крайні елементи не притискаються до країв). Простір між краєм контейнера та крайніми елементами буде вдвічі меншим, ніж простір між елементами в середині ряду.
• space-evenly

Вирівнює ряди, в яких знаходяться елементи поперечної осі. Те ж саме justify-content тільки для протилежної осі.

Примітка: Працює коли є щонайменше 2 ряди, тобто. за наявності лише 1 ряду нічого не станеться.

Тобто. якщо flex-direction: row, то ця властивість вирівнюватиме невидимі ряди по вертикалі. Тут важливо помітити, що висота блоку повинна бути задана жорстко і має бути більше висоти рядів інакше самі ряди розтягуватимуть контейнер і будь-яке їхнє вирівнювання втрачає сенс, тому що між ними немає вільного місця... А ось коли flex-direction: column , то ряди рухається по горизонталі → і ширина контейнера майже завжди більша за ширину рядів і вирівнювання рядів відразу набуває сенсу.

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

Вирівнює елементи поперечної осі всередині ряду (невидимого рядка). Тобто. самі ряди вирівнюються через align-content, а елементи всередині цих рядів (рядків) через align-items і все це по поперечній осі. По головній осі такого поділу немає, там немає поняття рядів та елементи вирівнюються через justify-content.

• stretch (default)- елементи розтягуються заповнюючи рядок повністю
• flex-start- елементи притискаються до початку ряду
• flex-end- елементи притискаються до кінця ряду
• center- Елементи вирівнюються по центру ряду
• baseline- елементи вирівнюються за базовою лінією тексту

Для елементів контейнера

Задає коефіцієнт збільшення елемента за наявності вільного місця у контейнері. За промовчанням flex-grow: 0 тобто. жодний з елементів не повинен збільшуватися та заповнювати вільне місце у контейнері.

Типово flex-grow: 0

• Якщо всім елементам вказати flex-grow:1 , всі вони розтягнутися однаково і заповнювати все вільне місце в контейнері.
• Якщо одному з елементів вказати flex-grow:1 , то він заповнить все вільне місце в контейнері та вирівнювання через justify-content працювати вже не будуть: вільного місця немає нічого вирівнювати.
• При flex-grow:1. Якщо один з них має flex-grow:2, то він буде вдвічі більше, ніж усі інші
• Якщо всі flex-блоки всередині flex-контейнера мають flex-grow:3, то вони будуть однакового розміру
• При flex-grow:3. Якщо один з них має flex-grow:12 , то він буде вчетверо більше, ніж усі інші

Як це працює? Припустимо, що контейнер має ширину 500px і містить два елементи, кожен із яких має базову ширину 100px. Значить у контейнері залишається 300 вільних пікселів. Тепер якщо першому елементу вкажемо flex-grow:2; , А другому flex-grow: 1; блоки займуть всю доступну ширину контейнера і ширина першого блоку буде 300px, а другого 200px. Пояснюється це тим, що доступні 300px вільного місця в контейнері розподілилися між елементами у співвідношенні 2:1, 200px першому і 100px другому.

Примітка: у значенні можна вказувати дробові числанаприклад: 0.5 - flex-grow:0.5

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

Типово flex-shrink:1

Припустимо, що контейнер має ширину 600px та містить два елементи, кожен з яких має ширину 300px - flex-basis:300px; . Тобто. два елементи повністю заповнюють контейнер. Першому елементу вкажемо flex-shrink: 2; , А другий flex-shrink: 1; . Тепер зменшимо ширину контейнера на 300px, тобто. елементи повинні стиснутися на 300px, щоб знаходитися всередині контейнера. Стискатимуться у співвідношенні 2:1, тобто. перший блок стиснеться на 200px, а другий на 100px та нові розміри елементів стануть 100px та 200px.

Примітка: у значенні можна вказувати дроби, наприклад: 0.5 - flex-shrink:0.5

Встановлює базову ширину елемента - ширину перед тим, як будуть вираховані інші умови, що впливають на ширину елемента. Значення можна вказати на px, em, rem, %, vw, vh і т.д. Підсумкова ширина залежатиме від базової ширини та значень flex-grow, flex-shrink та контенту всередині блоку. При auto елемент отримує базову ширину щодо контенту всередині нього.

Типово: auto

Іноді краще встановити ширину елемента жорстко через звичну властивість width. Наприклад, width: 50%; буде означати, що елемент усередині контейнера буде рівно 50%, проте при цьому будуть працювати властивості flex-grow і flex-shrink. Таке можливо, якщо елемент розтягується контентом всередині нього, більше зазначеного у flex-basis. Приклад.

flex-basis буде «жорстким», якщо обнулити розтяг і стиснення: flex-basis: 200px; flex-grow:0; flex-shrink:0; . Все це можна записати так flex:0 0 200px; .

Короткий запис трьох властивостей: flex-grow flex-shrink flex-basis.

Типово: flex: 0 1 auto

Однак можна вказати і одне, і два значення:

Flex: none; /* 0 0 auto */ /* число */ flex: 2; /* flex-grow (flex-basis переходить у 0) */ /* не число */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow та flex-basis */ flex: 2 2; /* flex-grow та flex-shrink (flex-basis переходить у 0) */ flex: 2 2 10%; /* flex-grow та flex-shrink та flex-basis */ align-self:

Дозволяє змінити властивість align-items лише для окремого елемента.

Типово: від align-items контейнера

• stretch- елемент розтягуються заповнюючи рядок повністю
• flex-start- елемент притискаються до початку рядка
• flex-end- елемент притискаються до кінця рядка
• center- елемент вирівнюються по центру рядка

baseline- елемент вирівнюються за базовою лінією тексту

Дозволяє змінювати порядок (позицію, становище) елемента у загальному ряду.

Типово: order: 0

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

Так можна, наприклад, перший елемент перекинути в кінець, при цьому не змінюючи напрямок руху інших елементів або HTML код.

нотатки

Чим відрізняється flex-basis від width?

Нижче важливі відмінності між flex-basis та width/height:

flex-basis працює лише для головної осі. Це означає, що при flex-direction:row flex-basis контролює ширину (width), а при flex-direction:column контролює висоту (height). .

flex-basis застосовується лише до flex елементів. А значить, якщо відключити flex у контейнера ця властивість не матиме ефекту.

Абсолютні елементи контейнера не беруть участь у flex конструкції... Отже, flex-basis не впливає на елементи flex контейнера, якщо вони абсолютні position:absolute . Їм потрібно буде вказати width/height.

• При використанні flex 3 значення (flex-grow/flex-shrink/flex-basis) можна скомбінувати і записати коротко, а для width grow або shrink потрібно писати окремо. Наприклад: flex:0 0 50% == width:50%; flex-shrink:0; . Іноді це незручно.

По можливості все ж таки віддавайте перевагу flex-basis . Використовуйте width тільки коли не підходить flex-basis.

Відмінність flex-basis від width – баг чи фіча?

Контент всередині flex елемент розпирає його і не може вийти за межі. Однак якщо встановити ширину через width або max-width, а не flex-basis, то елемент усередині flex контейнера зуміє вийти за межі цього контейнера (іноді потрібна саме така поведінка). Приклад:

Приклади Flex верстки

У прикладах ніде не застосовуються префікси для кросбраузерності. Я зробив так для зручного читання css. Тому приклади дивіться в останніх версіях Chromeабо Firefox.

#1 Простий приклад з вирівнюванням по вертикалі та горизонталі

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

Або так, без блоку всередині:

#1.2 Поділ (розрив) між елементами флекс блоку

Щоб розташувати елементи контейнера по краях і довільно вибрати елемент, після якого буде розрив, потрібно використовувати властивість margin-left:auto або margin-right:auto .

#2 Адаптивне меню на flex

Зробимо меню у самому верху сторінки. На широкому екрані воно має бути праворуч. На середньому вирівнюватись посередині. А на маленькому кожен елемент має бути на новому рядку.

#3 Адаптивні 3 колонки

Цей приклад показує як швидко і зручно зробити 3 колонки, які при звуженні будуть перетворюватися на 2 і потім на 1.

Зверніть увагу, що це можна зробити без використання media правил, все на flex.

Перейдіть до jsfiddle.net та змінюйте ширину секції «результат»

#4 Адаптивні блоки на flex

Допустимо нам потрібно вивести 3 блоки, один великий і два маленькі. При цьому потрібно, щоб блоки підлаштовувалися під маленькі екрани. Робимо:

Перейдіть до jsfiddle.net та змінюйте ширину секції «результат»

#5 Галерея на flex та transition

Цей приклад показує, як швидко можна зробити симпатичний акордеон з картинками на flex. Зверніть увагу на властивість transition для flex.

#6 Флекс у флекс (просто приклад)

Завдання зробити гнучкий блок. Так, щоб початок тексту в кожному блоці знаходилося на одній лінії по горизонталі. Тобто. при звуженні ширини, блоки зростають у висоту. Потрібно, щоб картинка була вгорі, кнопка завжди внизу, а текст посередині починався по одній горизонтальній лінії.

Для вирішення цього завдання самі блоки розтягуються флексом і ним встановлена ​​максимально можлива ширина. Кожен внутрішній блоктакож є флекс конструкцією, з поверненою віссю flex-direction: column; і елемент усередині (де знаходиться текст) розтягується flex-grow:1; щоб заповнити весь вільний простір, так досягається результат - текст починався з однієї лінії.

Ще приклади

Підтримка браузерами – 98.3%

Повної підтримки зрозуміло немає, але все сучасні браузерипідтримують flexbox конструкції. Деякі ще повинні вказувати префікси. Для реальної картини заглянемо в caniuse.com і бачимо, що без префіксів будуть працювати 96.3% браузерів, що використовуються сьогодні, з префіксами 98.3%. Це відмінний показник для того, щоб сміливо використовувати flexbox.

Щоб знати, які префікси актуальні на сьогодні (червень. 2019), наведу приклад усіх flex правил з потрібними префіксами:

/* Контейнер */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; distribute; align-content:space-around; ) /* Елементи */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; :center;align-self:center;-webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;

Краще, якщо властивості з префіксами будуть йти до оригінальної властивості.
У цьому списку немає непотрібних на сьогодні (з caniuse) префіксів, але взагалі префіксів більше.

• (new) – новий синтаксис: display: flex; .
• (tweener) – старий неофіційний синтаксис 2011 року: display: flexbox; .
• (old) – старий синтаксис 2009 року: display: box;

Відео

Ну і не забувайте про відео, там часом теж цікаво та зрозуміло. Ось парочка популярних:

Корисні посилання по Flex

flexboxfroggy.com - гра навчальна flexbox.

Flexplorer – наочний конструктор flex коду.

And send us a pull request.

Для найбільших прихильників, authors повинні встановити flex до однієї з наступних значень: auto , initial , none , або positive unitless number. Для того, щоб зробити ці значення, намагаються регулювати flex containers below:

Будь-яке значення flex items don't shrink below their minimum content size.

Syntax

The flex property може бути specified using one, 2, or 3 values.

Values

Formal syntax

Example

Var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() ( raw.style.display = raw.style.display == "none" ? "block" : "none"; )); #flex-container ( width: 100%; font-family: Consolas, Arial, sans-serif; ) #flex-container > div ( border: 1px solid #f00; padding: 1rem; ) #flex-container > .raw- item ( border: 1px solid #000; )

Result

Specifications

Browser compatibility

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub