Які теги використовувати у html flexbox. Flexbox: новий принцип CSS верстки макетів

Зміст:

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

UPD від 02.02.2017:зробила зручну шпаргалку з флексбоксів, з живими демками та описами з жару: Flexbox cheatsheet.

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

Згідно з сайтом caniuse.com, Flexboxне підтримується 8 та 9-м IE та Opera Mini, а в інших браузерах підтримуються не всі властивості та/або потрібні префікси.

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

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

Також слід мати на увазі, що при використанні Flexboxдля внутрішніх блоків не працюють float, clear і vertical-align, а також властивості, що задають колонки в тексті.

Приготуємо полігон для експериментів:

Один батьківський блок (жовтий) та 5 дочірніх.

Display: flex

І тепер батьківському елементу додаємо display: flex; . Внутрішні div-и вишиковуються в ряд (вздовж головної осі) колонками однакової висоти, незалежно від вмісту.

display: flex; робить все дочірні елементи гумовими - flex, а не інлайновими або блочними, як це було спочатку.

Якщо батьківський блок містить зображення або текст без обгорток, вони стають анонімними flex-елементами.

Властивість display для Flexboxможе приймати два значення:

flex – веде себе як блоковий елемент. При розрахунку ширини блоків пріоритет розкладки (при недостатній ширині блоків контент може вилазити за межі).

inline-flex – веде себе як інлайн-блоковий. Пріоритет вмісту (контент розчепірює блоки до необхідної ширини, щоб рядки, по можливості, помістилися).

Flex-direction

Напрямок розкладки блоків керується властивістю flex-direction.

Можливі значення:

row - рядок (значення за замовчуванням);

row-reverse - рядок з елементами у зворотному порядку;

column - стовпчик;

column-reverse - колонка з елементами у зворотному порядку.

row та row-reverse

Можливі значення:

column та column-reverse

Flex-wrap

В одному рядку може бути багато блоків. Переносяться вони чи ні визначає властивість flex-wrap.

nowrap - блоки не переносяться (значення за замовчуванням);

wrap – блоки переносяться;

wrap-reverse - блоки переносяться і розташовуються у зворотному порядку.

Для короткого запису властивостей flex-direction та flex-wrap існує властивість: flex-flow.

Можливі значення: можна задавати обидві властивості або лише якесь одне. Наприклад:

flex-flow: column;

flex-flow: wrap-reverse;

flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse:

Order

Для управління порядком блоків служить властивість order.

Можливі значення: числа. Щоб поставити блок найпершим, задайте йому order: -1:

Justify-content

Для вирівнювання елементів є кілька властивостей: justify-content, align-items і align-self.

justify-content і align-items застосовуються до батьківського контейнера, align-self - до дочірніх.

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

Можливі значення justify-content:

flex-start – елементи вирівнюються від початку головної осі (значення за умовчанням);

flex-end – елементи вирівнюються від кінця головної осі;

center – елементи вирівнюються по центру головної осі;

space-between – елементи вирівнюються по головній осі, розподіляючи вільне місце між собою;

space-around – елементи вирівнюються по головній осі, розподіляючи вільне місце навколо себе.

auto - значення за промовчанням. Означає, що елемент використовує align-items батьківського елемента;

flex-start – елемент вирівнюється від початку перпендикулярної осі;

flex-end – елемент вирівнюється від кінця перпендикулярної осі;

Можливі значення:

center – елемент вирівнюється по центру;

flex-start – елементи вирівнюються від початку головної осі (значення за умовчанням);

baseline – елемент вирівнюється по базовій лінії;

Justify-content

stretch - елемент розтягується, займаючи весь простір висотою. Align-content

Для управління вирівнюванням усередині багаторядкового flex-контейнера є властивість align-content.

flex-start – елементи вирівнюються від початку головної осі;

flex-end – елементи вирівнюються від кінця головної осі;

center – елементи вирівнюються по центру головної осі; space-between – елементи вирівнюються по головній осі, розподіляючи вільне місце між собою;

space-around – елементи вирівнюються по головній осі, розподіляючи вільне місце навколо себе;

stretch - елементи розтягуються, заповнюючи всю висоту (за замовчуванням).

center, stretch

Ps: Flexbox більше підходить для компонентів програми та невеликих макетів, тоді як CSS Grid призначений для більш масштабних макетів.

Основи та термінологія

Так як Flexbox - це цілий модуль, а не окрема властивість, він містить багато різних речей, включаючи цілий набір властивостей. Деякі з них призначені для встановлення їх контейнера (батьківський елемент, відомий як "flex-контейнер"), інші повинні встановлюватися дочірнім елементам (відомі як "flex-елементи").

Якщо звичайна система компонування заснована на блокових і рядкових напрямках, Flexbox заснований на "flex-flow напрямках". Будь ласка, погляньте на цей малюнок зі специфікації, який пояснює основну ідею Flexbox.

В основному елементи будуть розташовуватися вздовж основний осі(від main-start до main-end) або попереченої осі(Від cross-start до cross-end).

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

CSS Flexible Box Layout Module

Chrome для Android

Браузер Blackberry, починаючи з 10 версії, підтримує новий синтаксис.

Властивості для контейнера

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

Властивості для батьківського елемента (Flex-контейнер)

display

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

Container ( display: flex; /* або inline-flex */ )

Зверніть увагу, що CSS колонки не впливають на flex-контейнер.

flex-direction

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

Container ( flex-direction: row | row-reverse | column | column-reverse; )

• row (за замовчуванням)- зліва направо в ltr; праворуч наліво в rtl;
• row-reverse- Праворуч наліво в ltr; зліва направо в rtl;
• column- Теж саме що row, тільки зверху вниз;
• column-reverse- Теж саме що row-reverse, тільки знизу вгору;

flex-wrap

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

Container( flex-wrap: nowrap | wrap | wrap-reverse; )

• nowrap (за замовчуванням)- всі flex-елементи будуть розташовані на одному рядку;
• wrap- flex-елементи будуть розташовані на кількох рядках, зверху донизу;
• wrap-reverse- flex-елементи будуть розташовані на кількох рядках, знизу догори;

justify-content

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

Container ( justify-content: flex-start | flex-end | center | space-between | space-around; )

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

align-items

Ця властивість визначає поведінку flex-елементів уздовж поперечної осі на поточному рядку. Думайте про нього як про тільки для поперечної осі (перпендикулярної основної осі).

Container ( align-items: flex-start | flex-end | center | baseline | stretch; )

• flex-start -елементи розміщуються на початку поперечної осі;
• flex-end -елементи розміщуються наприкінці поперечної осі;
• center -елементи розташовуються в центрі поперечної осі;
• baseline- Елементи вирівнюються по базовій лінії;
• stretch (за замовчуванням)- розтягуються щоб заповнити весь контейнер (як і дотримуються min-width/max-width);

align-content

Ps:Ця властивість не діє, коли є лише один рядок flex-елементів.

Container ( align-content: flex-start | flex-end | center | space-between | space-around | stretch; )

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

Властивості для дочірніх елементів

order

За замовчуванням, всі елементи розміщуються у початковому для них порядку. Однак, властивість order управляє порядком, в якому розміщуються елементи всередині контейнера.

Item ( order: ; }

flex-grow

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

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

Item (flex-grow: ; /* за замовчуванням 0 */ )

Не можна зазначати негативні числа.

flex-basis

Визначає розмір елемента за умовчанням, до розподілу простору, що залишився. Це може бути довжина (20%, 5rem і т.д.) або ключове слово. Ключове слово auto означає "виглядати як моя властивість width або height". Ключове слово content означає що "розмір заснований на вмісті елемента" - це ключове слово поки не дуже добре підтримується, тому його важко перевірити, а ще важче дізнатися, що роблять його брати min-content, max-content і fit-content.

Item (flex-basis: | auto; /* за замовчуванням auto */ )

Якщо встановити значення 0 , додатковий простір навколо вмісту не враховуватиметься. Якщо встановити auto, додатковий простір розподілятиметься на основі значення.

flex

Це скорочення для , і . Другий і третій параметри (flex-shrink та flex-basis) не обов'язкові. Значення за замовчуванням встановлено на 0 1 auto .

Item ( flex: none | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

align-self

Ця властивість дозволяє перевизначити вирівнювання за умовчанням (або задане за допомогою властивості) для окремих flex-елементів.

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

Item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; ) .item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Зверніть увагу, що float , clear і vertical-align не впливають на flex-елемент.

Приклади

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

Parent ( display: flex; height: 300px; ) .child ( width: 100px; height: 100px; margin: auto; )

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

Тепер використовуємо ще кілька властивостей. Розглянемо список із 6 елементів, всі з фіксованим розміром в естетичному відношенні, але вони можуть бути автоматичними. Ми хочемо, щоб вони були рівномірно розподілені вздовж горизонтальної осі і щоб змінити розмір браузера все було в порядку (без медіа-запитів!).

Flex-container ( display: flex; flex-flow: row wrap; justify-content: space-around; )

Готово! Все інше це лише деякі проблеми дизайну. Нижче наведено приклад на CodePen, обов'язково зайдіть туди і спробуйте змінити розмір вікон, щоб побачити, що станеться.

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

Navigation ( display: flex; flex-flow: row wrap; justify-content: flex-end; ) @media all and (max-width: 800px) ( .navigation ( justify-content: space-around; ) ) and (max-width: 500px) ( .navigation ( flex-direction: column; ) )

Давайте спробуємо зробити щось краще, граючись з гнучкістю наших flex-елементів! Як щодо триколонкового mobile-first макета з шапкою і футером на всю ширину екрану, і щоб не було залежності від початкового порядку елементів.

Wrapper ( display: flex; flex-flow: row wrap; ) .header, .main, .nav, .aside, .footer ( flex: 1 100%; ) @media all and (min-width: 600px) ( .aside ( flex: 1 auto; ) ) @media all and (min-width: 800px) ( .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside- 2 ( order: 3; ) .footer ( order: 4; ) )

Пов'язані властивості

Помилки

Безумовно, Flexbox не без помилок. Найкраща колекція, яку я бачив представлена ​​Philip Walton і Greg Whitworth"s Flexbugs . Це Open Source місце для відстеження всіх помилок, тому я думаю, що найкраще просто залишити посилання.

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

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

Звучить непогано, але давайте подивимося, чи воно гладко на практиці. У цій статті ми вивчимо 5 найпопулярніших властивостей 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.

Як Яндекс використовує ваші дані та машинне навчання для персоналізації сервісів - .

Якщо говорити коротко, то верстка з 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 конструкцією. Одні потрібно застосовувати до основного контейнера, інші до елементів цього контейнера.

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

display:

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

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

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

flex-direction:

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

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

flex-wrap:

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

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

flex-flow: direction 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

align-content:

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

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

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

align-items:

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

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

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

flex-grow:

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

За замовчуванням flex-grow: 0

• Якщо всім елементам вказати flex-grow:1 , всі вони розтягнутися однаково і заповнювати все вільне місце в контейнері.
• Якщо одному з елементів вказати flex-grow:1 , то він заповнить все вільне місце в контейнері і вирівнювання через justify-content працювати вже не будуть: вільного місця немає нічого вирівнювати.
• При flex-grow:1. Якщо один з них має flex-grow:2, то він буде в 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-shrink:

Задає коефіцієнт зменшення елемента. Властивість протилежна 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

flex-basis:

Встановлює базову ширину елемента - ширину перед тим, як будуть вираховані інші умови які впливають ширину елемента. Значення можна вказати 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 shrink basis)

Короткий запис трьох властивостей: 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:

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

За замовчуванням: 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; -flex-flow:column wrap; flex-flow:column wrap; 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; :center; align-self:center;

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

Chrome	Safari	Firefox	Opera	IE	Android	iOS
20 (old)	3.1+ (old)	2-21 (old)		10 (tweener)	2.1+ (old)	3.2+ (old)
21+ (new)	6.1+ (new)	22+ (new)	12.1+ (new)	11+ (new)	4.4+ (new)	7.1+ (new)

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

Відео

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

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

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

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

Привіт, хабре!

Одним прекрасним вечором, який не віщує нічого цікавого, до нашого чатика надійшла пропозиція від автора публікації, написаної ним навесні 2012 року, написати статтю-ремейк, але із застосуванням FlexBox та супутнім поясненням що і як працює. Після деякої частки сумнівів, інтерес глибше розібратися в специфікації все-таки переміг і я сів верстати ті самі приклади. У ході занурення в цю область почало з'ясовуватися безліч нюансів, що переросло в щось більше, ніж просто переверстати макетики. Загалом у цій статті хочу розповісти про таку чудову специфікацію під назвою «CSS Flexible Box Layout Module» і показати деякі її цікаві особливості та приклади застосування. Усіх комусь цікаво, люб'язно запрошую під хабракат.

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

Технічна частина

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

Отже. У FlexBox є два основних типи елементів: Гнучкий Контейнер (Flex Container) та його дочірні елементи - Гнучкі Елементи (Flex Item). Для ініціалізації контейнера достатньо присвоїти, через css, елементу display: flex;або display: inline-flex;. Різниця між flex і inline-flex полягає лише в принципі взаємодії з оточуючими контейнерами елементами, подібно display: block; та display: inline-block;, відповідно.

Усередині гнучкого контейнера створюються дві осі, головна вісь (main-axis) та перпендикулярна або крос вісь (cross axis). Переважно гнучкі елементи шикуються саме по головній осі, а потім уже по крос осі. За умовчанням головна вісь горизонтальна і має напрямок ліворуч, а крос вісь вертикальна і спрямована зверху вниз.

Напрямком осей можна керувати за допомогою CSS-властивості flex-direction. Ця властивість набуває ряду значень:
row(default): Головна вісь гнучкого контейнера має ту ж орієнтацію, як і інлайн вісь поточного режиму спрямування рядків . Початок (main-start) та кінець (main-end) напряму головної осі відповідають початку (inline-start) та кінцю (inline-end) інлайн осі (inline-axis).
row-reverse: Все те саме, що і в row тільки main-start і main-end змінюються місцями
column: так само, як і row, тільки тепер головна вісь спрямована зверху вниз.
column-reverse: так само, як row-reverse, тільки головна вісь спрямована знизу вгору.
Як це працює можна подивитися у прикладі на jsfiddle.

За замовчуванням усі гнучкі елементи в контейнері укладаються в один рядок, навіть якщо не поміщаються в контейнер, вони виходять за його межі. Ця поведінка перемикається за допомогою властивості flex-wrap. Ця властивість має три стани:
nowrap(default): гнучкі елементи вишиковуються в один рядок зліва направо.
wrap: гнучкі елементи будуються в багаторядковому режимі, перенесення здійснюється у напрямку крос осі, зверху донизу.
wrap-reverse: так само, як і wrap, але перенесення відбувається знизу вгору.
Дивимося приклад.

Для зручності є додаткова властивість flex-flow, в якому можна одночасно вказати flex-directionі flex-wrap. Виглядає це так: flex-flow:

Елементи в контейнері піддаються вирівнюванню за допомогою властивості justify-contentвздовж головної осі. Ця властивість набуває цілих п'ять різних варіантів значень.
flex-start(default): гнучкі елементи вирівнюються спочатку головної осі.
flex-end: елементи вирівнюються до кінця головної осі
center: елементи вирівнюються по центру головної осі
space-between: елементи займають всю доступну ширину контейнера, крайні елементи впритул притискаються до країв контейнера, а вільний простір рівномірно розподіляється між елементами.
space-around: гнучкі елементи вирівнюються таким чином, що вільний простір рівномірно розподіляється між елементами. Але варто відзначити, що простір між краєм контейнера і крайніми елементами буде вдвічі меншим, ніж простір між елементами в середині ряду.
Звичайно ж поклацувати приклад роботи цієї властивості можна.

Це ще не все, ми також маємо можливість вирівнювання елементів по крос осі. Застосувавши властивість align-items, яке приймає також п'ять різних значень, можна досягти цікавої поведінки. Ця властивість дозволяє вирівнювати елементи в рядку один одного.
flex-start: всі елементи притискаються до початку рядка
flex-end: елементи притискаються до кінця рядка
center: елементи вирівнюються по центру рядка
baseline: елементи вирівнюються по базовій лінії тексту
stretch(default): елементи розтягуються повністю заповнюючи рядок.

Ще одна схожа властивість на попередню це align-content. Тільки воно відповідає за вирівнювання цілих рядків щодо гнучкого контейнера. Воно не даватиме ефекту, якщо гнучкі елементи займають один рядок. Властивість набуває шести різних значень.
flex-start: всі лінії притискаються до початку крос-осі
flex-end: всі лінії притискаються до кінця крос-осі
center: Всі лінії паком вирівнюються по центру крос осі.
space-between: лінії розподіляються від верхнього краю до нижнього залишаючи вільний простір між рядками, крайні рядки притискаються до країв контейнера.
space-around: лінії рівномірно розподіляються контейнером.
stretch(default): лінії розтягуються займаючи весь доступний простір.
Спробувати як працюють align-items і align-content можна в цьому прикладі. Я спеціально дві ці властивості представив одному прикладі, оскільки вони досить щільно взаємодіють кожен виконуючи своє завдання. Зверніть увагу, що відбувається коли елементи поміщаються в один рядок і в кілька.

З параметрами гнучкого контейнера розібралися, залишилося розібратися із властивостями гнучких елементів.
Перше властивість з яким ми познайомимося це order. Ця властивість дозволяє змінювати позицію в потоці конкретного елемента. За замовчуванням усі гнучкі елементи мають order: 0;і будуються як природного потоку. У прикладі можна побачити як міняються місцями елементи, якщо до них застосовувати різні значення order.

Одна з основних властивостей є flex-basis. За допомогою цієї якості ми можемо вказувати базову ширину гнучкого елемента. За замовчуванням має значення auto. Ця властивість тісно пов'язана з flex-growі flex-shrink, Про які я розповім трохи пізніше. Приймає значення ширини px, %, em та інших одиницях. По суті, це не строго ширина гнучкого елемента, це свого роду відправна точка. Щодо якої відбувається розтягування або усадка елемента. У режимі auto елемент отримує базову ширину щодо контенту всередині нього.

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

Тут ми плавно переходимо до іншої аналогічної властивості, а саме flex-shrink. За замовчуванням має значення 1. Воно також задає фактор зміну ширини елементів, лише у зворотний бік. Якщо контейнер має ширину меншечим сума базової ширини елементів, то починає діяти це властивість. Наприклад, контейнер має ширину 600px, а flex-basis елементів по 300px. Першому елементу вкажемо flex-shrink: 2; а другому flex-shrink: 1;. Тепер стиснемо контейнер на 300px. Отже сума ширини елементів на 300px більша ніж контейнер. Ця різниця розподіляється у співвідношенні 2:1, виходить від першого блоку забираємо 200px, а від другого 100px. Новий розмір елементів виходить 100px та 200px, у першого та другого елемента, відповідно. Якщо ми встановлюємо flex-shrink значення 0, то ми забороняємо стискатися елементу до розмірів менше ніж його базова ширина.

Насправді це дуже спрощений опис того, як це все працює, щоб був зрозумілий загальний принцип. Більш докладно, якщо комусь цікаво, алгоритм описаний у специфікації.

Усі три властивості можна записати у скороченій формі за допомогою виразу flex. Це має такий вигляд:
flex: ;
А так само ми можемо писати ще два скорочені варіанти, flex: auto;і flex: none;, що означає flex: 1 1 auto;і flex: 0 0 auto;відповідно.

Останньою властивістю гнучких елементів залишився align-self. Тут все просто, це те саме, що align-items у контейнера, що дозволяє перевизначати вирівнювання конкретно взятого елемента.

Все, набрид! Приклади давай!

З технічною частиною розібралися, вийшло досить затягнуто, але це потрібно вникнути. Тепер можна перейти до практичного застосування.
У ході верстки тих самих «п'яти дійсно корисних шаблонів адаптивної розмітки» довелося вирішувати типові ситуації, з якими розробник стикається досить часто. З flexbox реалізація цих рішень стає простіше та гнучкіше.
Візьмемо той самий четвертий макет, т.к. у ньому найбільше цікавих елементів.

Для початку позначимо основну ширину сторінки, вирівняємо по центру, притиснемо футер донизу сторінки. Як завжди загалом.

Html ( background: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex-direction: column; : 30px 0 10px; -display: flex; : 960px; min-width: 430px; auto; flex-grow: 1; : 430px; #eee;

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

Розмістимо тепер логотип та меню в хедері.
.logo ( font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( background: #222; : 30px; ) .nav ( margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; width: 130px; height: 50px; font-size: 1.5rem; #eee; )

Оскільки для хедера вказано flex-wrap: wrap; та justify-content: space-between; логотип та меню розкидає по різних сторонах хедера, при цьому якщо місця для меню не вистачатиме воно елегантно зміститься під логотип.

Далі ми бачимо великий пост або банер, важко сказати що це конкретно, але і не суть. У нас є картинка праворуч і текст із заголовком зліва. Я особисто дотримуюся ідеї, що будь-які елементи мають бути максимально гнучкими, незалежно від того, чи адаптована це верстка чи статика. Отже у нас є в цьому пості сайд-бар в якому розміщена картинка, строго кажучи, ми не можемо точно сказати яка ширина нам потрібна, бо сьогодні у нас велика картинка, завтра маленька і щоразу переробляти елемент з нуля небажання. Значить, нам потрібно, щоб сайд-бар зайняв потрібне йому місце, а решта місця пішла на контент. Так і зробимо:

Box ( font-size: 1.25rem; line-height: 1.5; font-style: italic; margin: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; . : auto;

Як ви бачите для.box-base, там де у нас заголовок та текст, я вказав базову ширину за допомогою flex-basis: 430px;, а також заборонив усадку блоку за допомогою flex-shrink: 0;. Цією маніпуляцією ми сказали, що контент не може стати меншим ніж 430px завширшки. А через те, що для.box я вказую flex-wrap: wrap;в той момент, коли сайд-бар та контент не будуть розміщуватись у контейнер.box, сайд-бар автоматично провалиться під контент. І це все без застосування @media! Я вважаю це справді дуже круто.

У нас залишився триколоночний контент. Рішень подібного завдання кілька, я покажу один із них, в решті макетів є й інший варіант.
Створюємо контейнер, назвемо його. content і налаштуємо.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

У контейнері три колонки, .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px;

Задав колонкам базову ширину 200px, щоб колонки не звужувалися прям занадто сильно, нехай краще вони при потребі переносяться один під одного.

За макетом, нам із контентом, обійтися без @media не вийде, тому ще трохи налаштуємо поведінку колонок для ширини<800px и <600px.
@media screen and (max-width: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @media screen and (max-width: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Ось і вся магія, що стосується побудови лейауту на FlexBox. Ще одне завдання, яке мені сподобалося, знаходиться в п'ятому макеті, саме це стосується адаптації контенту.

Ми бачимо, як на десктопній роздільній здатності пости побудовані в сітку по три штуки в ряд. Коли ширина viewport стає меншою за 800px, то сітка перетворюється на колонку з постами, де фото посту вибудовується з лівого та правого боку від контенту посту, по черзі. А при ширині менше 600px фото посту ховається зовсім.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); display: -webkit-flex; display: flex-wrap; 0 1 100%; .grid-title (text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img (flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen and (max-width: 600px) ( .grid-img ( display: none; ) )

Насправді це лише мала частина того, що можна реалізувати на FlexBox. Специфікація дозволяє будувати складні макети сторінок при цьому застосовуючи простий код.