Верстка за допомогою CSS Flexbox. Верстка за допомогою CSS Flexbox Фрагмент макета секції з формою

Якщо говорити коротко, то верстка з 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-evenly- теж що space-around , тільки відстань крайніх елементів до країв контейнера така ж як і між елементами.

align-items:

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

• stretch (default)- елементи розтягуються заповнюючи рядок повністю
• 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; -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; :center;align-self:center;-webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;

Краще, якщо властивості з префіксами будуть йти до оригінальної властивості.
У цьому списку немає непотрібних на сьогодні (з 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 коду.

Я хотів би розповісти про FlexBox. Модуль Flexbox-верстки (flexible box - "гнучкий блок", на Наразі W3C Candidate Recommendation) ставить завдання запропонувати більше ефективний спосібверстки, вирівнювання та розподілу вільного місця між елементами в контейнері, навіть коли їх розмір невідомий та/або динамічний (звідси слово «гнучкий»).

Головна задумка flex-верстки в наділенні контейнера здатністю змінювати ширину/висоту (і порядок) своїх елементів для кращого заповнення простору (у більшості випадків – для підтримки всіх видів дисплеїв та розмірів екранів).Flex-контейнер розтягує елементи для заповнення вільного місця або стискає їх, щоб запобігти виходу за кордон.

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

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

Якщо звичайний макет ґрунтується на напрямках потоків блокових та інлайн-елементів, то flex-макет ґрунтується на «напрямках flex-потоку».

Flexbox

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

main-axis - головна вісь, вздовж якого розташовуються flex-елементи.Зверніть увагу, вона обов'язково має бути горизонтальною, все залежить від якості justify-content.
main-start | main-end - flex-елементи розміщуються в контейнері від позиції main-start позиції main-end.
main size - ширина або висота flex-елемента в залежності від обраної основної величини.Основна величина може бути або завширшки, або заввишки елемента.
cross axis – поперечна вісь, перпендикулярна головній.Її напрямок залежить від напрямку головної осі.
cross-start | cross-end — flex-рядки заповнюються елементами та розміщуються у контейнері від позиції cross-start та позиції cross-end.
cross size - ширина або висота flex-елемента в залежності від обраної розмірності дорівнює цій величині.Ця властивість збігається з width або height елементзалежно від вибраної розмірності.

Властивості
display: flex | inline-flex;

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

display: other values ​​​| flex | inline-flex;

Майте на увазі:

CSS-стовпці columns не працюють з flex-контейнеромfloat, clear та vertical-align не працюють з flex-елементами

flex-direction

Застосовується до батьківського елемента flex-контейнера.

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

flex-direction: row | row-reverse | column | column-reverse

row (за замовчуванням): зліва направо для ltr, праворуч наліво для rtl;
row-reverse: праворуч наліво для ltr, зліва направо для rtl;
column: аналогічно row, зверху донизу;
column-reverse: аналогічно row-reverse, знизу нагору.

flex-wrap

Застосовується до батьківського елемента flex-контейнера.

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

flex-wrap: nowrap | wrap | wrap-reverse

nowrap (за замовчуванням): однорядковий / зліва направо для ltr, праворуч наліво для rtl;
wrap: багаторядковий / зліва направо для ltr, праворуч наліво для rtl;
wrap-reverse: багаторядковий / праворуч наліво для ltr, зліва направо для rtl.

flex-flow

Застосовується до батьківського елемента flex-контейнера.

Це скорочення для властивостей flex-direction та flex-wrap, разом визначають головну та поперечну осі.За замовчуванням набуває значення row nowrap.

flex-flow< ‘flex-direction’> || < ‘Flex-wrap’>

justify-content

Застосовується до батьківського елемента flex-контейнера.

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

justify-content: flex-start flex-end центр | space-between | space-around

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

justify-content
align-items

Застосовується до батьківського елемента flex-контейнера.

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

align-items: flex-start | flex-end центр | Baseline | stretch

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

align-items
align-content

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

align-content: flex-start flex-end центр | space-between | space-around | stretch

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

align-content
order

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

order 1

flex-grow

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

flex-grow (за замовчуванням 0)

flex-shrink

Застосовується до дочірнього елемента/flex-елемента.

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

flex-shrink (default 1)

Негативні числа не приймаються.
flex-basis

Застосовується до дочірнього елемента/flex-елемента. Визначає розмір за замовчуванням елемента перед розподілом простору в контейнері.

flex-basis | auto (default auto)

flex

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

flex: none | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

align-self

Застосовується до дочірнього елемента/flex-елемента. Дозволяє перевизначити вирівнювання, задане за замовчуванням або в align-items, для окремих flex-елементів. Зверніться до опису якості align-items для кращого розуміння доступних значень.

align-self: auto | flex-start flex-end центр | Baseline | stretch

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

Parent ( display: flex; height: 300px; ) .child ( width: 100px; / * Або що завгодно * / height: 100px; / * Або що завгодно * / margin: auto; / * Магія! * / )

Цей приклад ґрунтується на тому, що margin під flex-контейнері, заданий як auto, поглинає зайвий простір, тому завдання відступу таким чином вирівняє елемент рівно по центру по обох осях. Тепер давайте використовуємо якісь властивості.Уявіть набір із 6 елементів фіксованого розміру (для краси), але з можливістю зміни розміру контейнера.Ми хочемо рівномірно розподілити їх по горизонталі, щоб при зміні розміру вікна браузера виглядало добре (без @media-запитів!).

Flex-container (
/ * Спочатку створимо flex-контекст * /
display: flex;

/ * Тепер визначимо напрямок потоку і чи хочемо ми, щоб елементи
переносилися на новий рядок
* Пам'ятайте, що це те саме, що і:
* Flex-direction: row;
* Flex-wrap: wrap;
* /
flex-flow: row wrap;

/ * Тепер визначимо, як розподілятиметься простір * /
}

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

/ * Великі екрани * /
.navigation (
display: flex;
flex-flow: row wrap;
/ * Зсуває елементи до кінця рядка по головній осі * /
justify-content: flex-end;
}

media all and (max-width: 800px) (
.navigation (
/ * Для екранів середнього розміру ми вирівнюємо навігацію по центру,
рівномірно розподіляючи вільне місце між елементами * /
justify-content: space-around;
}
}

/ * Маленькі екрани * /
media all and (max-width: 500px) (
.navigation (
/ * На маленьких екранах замість рядка ми маємо елементи в стовпці * /
flex-direction: column;
}
}

Давайте пограємо із гнучкістю flex-елементів!Як щодо орієнтованого на мобільні пристрої триколонкового макета з повноширинною шапкою та підвалом?І іншим порядком розташування.

Wrapper (
display: flex;
flex-flow: row wrap;
}

/ * Задаємо всім Елемети ширину в 100% * /
.header, .main, .nav, .aside, .footer (
flex 1100%;
}

/ * У цьому випадку ми покладаємося на вихідний порядок для орієнтації на
* Мобільні пристрої:
* 1 header
* 2 nav
* 3 main
* 4 aside
* 5 footer
* /

/ * Екрани середнього розміру * /
media all and (min-width: 600px) (
/ * Обидва сайдбари розташовуються в одному рядку * /
.aside (flex: 1 auto; )
}

/ * Великі екрани * /

На прикладі форми із реального тестового завданняя покажу вам, як верстати по БЕМ, використовуючи flexbox. Ви запитаєте: "Чому обов'язково верстати по БЕМ + Flexbox?" Ця вимога походить від роботодавця. Цитата з ТЗ: "Намагайтеся верстати без фреймворків (бажано на flexbox), просто і зрозуміло: уникайте громіздких конструкцій та зайвого коду, використовуйте методологію БЕМ."

Фрагмент макет секції з формою

Мої правила верстки

1. Розділити макет на логічні секції
2. Кожну секцію починати з тега section
3. Відокремлювати секції та CSSправили один від одного, порожнім рядком
4. Кожен теґ присвоїти клас
5. Назва класу для блоку або елемента відповідає на запитання - Що це?
6. Ім'я модифікатора відповідає на запитання - Який?

HTML розмітка

Спочатку я роблю розмітку, визначаю вкладеність блоків та вигадую назви класам. У поданому нижче коді, у нас є два рядкові теги - h2і input. Рядкові теги - це головний біль і причина стресу, у верстальників-початківців. Чому? Вони дуже погано поводяться - намагаються зайняти всю доступну ширину, не дають встановити колір фону і розміри всього блоку.

Особиста інформація

Що в такому випадку робить поганий верстальник? Він обертає малі елементи в блокові теги divі всі необхідні властивості задає тегу обгортці. Дочірні малі елементи, успадковують ці властивості. А чи варто городити город із зайвого коду? Як надійде грамотний верстальник? Він перевизначить рядковий елемент на блоковий або рядково-блоковий, CSSправила.

Display: block; // для тега input
display: inline-block; // для тега h2

Логіка вкладеності та назви блоків

Ми бачимо секцію з особистою інформацією, так і називаємо клас секції. info. Секція складається із трьох дочірніх елементів:

Іконка // Назва класу info__icon
заголовок // info__title
форма // info__form

Суть у назві класів за БЕМ, полягає у приналежності дочірнього елемента до батька. Не можна назвати елемент, icon. Це не просто якась іконка, а іконка із секції info.

Донька та батько в одній особі

Блок info__form, у нас особливий - він вкладений у секцію infoале в той же час містить поля форми. Назва цього явища – багаторівнева вкладеність. Блок з формою несе чисто обгорткову функцію для інпутів, щоб легко можна було задати зовнішні відступи. Адже малі інпути поводяться, як діти (ким вони і є), зовсім не слухаються. Причому другий інпут, коротше всіх інших і відрізняється лише шириною.

Задаємо один клас для всіх інпутів з однаковими властивостями, крім ширини - info__input. Звичайним інпутам, додамо модифікатор info__input_longа короткому інпуту - модифікатор info__input_short. Нагадаю, що модифікатор по БЕМ, повинен відповідати на запитання - Який?

CSS правила для модифікаторів

.info__input_long (
width: 520px;
}

Info__input_short (
width: 320px;
}

CSS код

У HTMLрозмітці створюється груба структура сайту, CSS, ми вже розміщуємо елементи, згідно з макетом. Сьогодні, ми не будемо торкатися зовнішнього вигляду, а зосередимося на позиціонуванні елементів. У нашій секції, два флексові контейнери. Слід сказати, що використання флексів, при розташуванні всіх елементів по одному в рядку, дуже сумнівне. Єдина одержувана користь - це властивість justify-content, що вирівнює по центру, флексні елементи. Можу сказати у своє виправдання, що затія з флексами безглузда, в контексті тільки цієї секції. Справжній макет для верстки зазвичай має більше різноманітності.

Info (
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 77px;
height: 100%;
}

Info__form (
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
margin-top: 50px;

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

Застосовується до: flex контейнер.

Значення за замовчуванням: stretch.

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

Схема content property aligns flex container’s lines within flex container when there is extra space in the cross-axis, similar to how justify-content aligns individuals items within main-axis. Note, ця особливість не має ніякого ефекту на single-line flex container. Values ​​have the following meanings:

Note: Тільки multi-line flex containers ever have free space in cross-axis for lines to be aligned in, because in single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

Flex-start Lines є packed toward start of flex container. Крос-start edge of first line in flex container is placed flush with cross-start edge of flex container, and each subsequent line is placed flush with preceding line. flex-end Lines є packed до end of flex container. Кресовий кінець краю кінцевої лінії є блискучою кухнею з cross-end ланцюжком flex container, і будь-яка знижена лінія є placed flush with subsequent line. Центр Lines є packed доцентру flex container. Лінії в flex container є placed flush with each other and aligned in center of flex container, with equal amounts of space between cross-start content edge of flex container and the first line in flex container, and between the cross-end content edge of flex container and last line in flex container. (Якщо leftover free-space є negative, the lines буде overflow equally в both directions.) space-between Lines є evenly distributed в flex container. Якщо leftover free-space negative this value is identical to flex-start. Інші, cross-start edge of the first line in flex container is placed flush with the cross-start content edge of the flex container, cross-end edge of the last line in flex container is placed flush with the cross- end content edge of flex container, and remaining lines in flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Лінії є evenly distributed в flex container, з half-size spaces on either end. Якщо leftover free-space negative this value is identical to center. Іншіwise, lines в flex container є distributed such that the spacing between any any adjacent lines is the same, and spacing between the first/last lines and flex container edges is half the size of spacing between flex lines. space-evenly Lines є evenly distributed в flex container. Якщо leftover free-space negative this value is identical to center. Іншіwise, lines в flex container є distributed such that the spacing між every flex line is the same. stretch Lines stretch to up the remaining space. Якщо leftover free-space є negative, це значення є identical to flex-start. Іншийwise, free-space is split equally між всіма лініями, збільшення їх cross size.

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

Призначення CSS Flexbox

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

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

Flexbox можна використовувати як CSS розмітки цілої сторінки, і її окремих блоків.

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

CSS Flexbox підтримується всіма використовувані на сьогоднішній момент сучасними браузерами(з використанням префіксів: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основи CSS Flexbox

Створення CSS розмітки за допомогою Flexbox починається з встановлення необхідного HTML елементу CSS-властивості display зі значенням flex або flex-inline.

Після цього даний елементстає flex-контейнером, а всі його безпосередні дочірні елементи- flex-елементами. При цьому коли ми говоримо про flexbox то маємо на увазі тільки елемент з display:flex або display:flex-inline і всі елементи безпосередньорозташовані у ньому. Таким чином, у CSS Flexbox є всього два типи елементів: flex-контейнер і flex-елемент.

У CSS для підтримки макета більшістю браузерів додані властивості з префіксами та max-width.

Для «перетворення» блоку на flex-контейнер використовується клас row . Установка ширини flex-елементів.col__article і.col__aside всередині flex-контейнера виконана з використанням CSS-властивості flex .

Як приклад розмітимо за допомогою flexbox ще футер і створимо в елементі. У футері розмістимо чотири блоки (мінімальна ширина одного блоку – 200px).