Передумови
Модуль Flexbox Layout
(Гнучка коробка) (Рекомендація кандидата W3C станом на жовтень 2017 р.) Має на меті забезпечити більш ефективний спосіб розкласти, вирівняти та розподілити простір між предметами в контейнері, навіть коли їх розмір невідомий та / або динамічний (таким чином, слово "flex").
Основна ідея гнучкого розміщення полягає в тому, щоб дати контейнеру можливість змінювати ширину / висоту своїх елементів (і порядок), щоб найкращим чином заповнити доступний простір (переважно для розміщення на всіх видах пристроїв відображення та розмірах екрана). Гнучкий контейнер розширює елементи, щоб заповнити вільний вільний простір, або зменшує їх, щоб запобігти переповненню.
Найголовніше, що макет flexbox є напрямним, на відміну від звичайних макетів (блок, який має вертикальну основу та рядок, який має горизонтальну основу). Хоча вони добре працюють для сторінок, їм не вистачає гнучкості (не передбачається каламбур) для підтримки великих або складних додатків (особливо коли мова йде про зміну орієнтації, зміну розміру, розтягування, зменшення тощо).
Примітка: Макет Flexbox найбільш підходить для компонентів програми та малих макетів, тоді як макет сітки призначений для макетів великих масштабів.
Основи та термінологія
Оскільки flexbox - це цілий модуль, а не одна властивість, він включає багато речей, включаючи весь його набір властивостей. Деякі з них призначені для встановлення на контейнері (батьківський елемент, відомий як “flex-контейнер”), тоді як інші призначені для встановлення для дочірніх елементів (згадані “елементи flex”).
Якщо "звичайний" макет базується як на блочному, так і на вбудованому напрямках потоку, гнучкий макет базується на "напрямках гнучкого потоку". Будь ласка, подивіться на цей малюнок із специфікації, пояснивши основну ідею гнучкого розташування.
Елементи будуть викладені, дотримуючись або main axis
(від main-start
до main-end
), або поперечної осі (від cross-start
до cross-end
).
- головна вісь - Головна вісь гнучкого контейнера є основною віссю, вздовж якої викладаються гнучкі елементи. Остерігайтеся, це не обов'язково горизонтально; це залежить від
flex-direction
властивості (див. нижче). - головний старт | main-end - гнучкі елементи розміщуються в контейнері, починаючи з main-start і переходячи до main-end.
- основний розмір - ширина або висота гнучкого предмета, залежно від того, що знаходиться в основному розмірі, є основним розміром предмета. Основною властивістю розміру елемента flex є властивість 'width' або 'height', залежно від того, що знаходиться в основному вимірі.
- поперечна вісь - вісь, перпендикулярна до головної осі, називається поперечною віссю. Його напрямок залежить від напрямку головної осі.
- перехресний старт | поперечний кінець - гнучкі лінії заповнюються предметами і поміщаються в контейнер, починаючи з боку поперечного старту гнучкого контейнера і йдучи у бік поперечного кінця.
- перехресний розмір - ширина або висота гнучкого предмета, залежно від того, який розмір перехресного розміру, є перехресним розміром предмета. Властивість перехресного розміру - це будь-яка з "ширини" або "висоти", яка знаходиться в перехресному вимірі.
Отримайте плакат!
Багато посилаєтесь на цей посібник? Закріпіть копію на стіні офісу.
Купити плакатВластивості для батьків
(гнучкий контейнер)
дисплей
Це визначає гнучкий контейнер; вбудований або блокований залежно від заданого значення. Це забезпечує гнучкий контекст для всіх своїх прямих дітей.
.container ( display: flex; /* or inline-flex */ )
Зверніть увагу, що стовпці CSS не впливають на гнучкий контейнер.
flex-direction
Це встановлює головну вісь, таким чином визначаючи напрямок гнучких елементів, розміщених у гнучкому контейнері. Flexbox - це (крім необов’язкової упаковки) концепція макета в одному напрямку. Подумайте про елементи гнучкості як про переважно розкладці або в горизонтальних рядках, або у вертикальних стовпцях.
.container ( flex-direction: row | row-reverse | column | column-reverse; )
row
(за замовчуванням): зліва направо уltr
; справа наліво вrtl
row-reverse
: справа наліво вltr
; зліва направо вrtl
column
: те саме, щоrow
і зверху внизcolumn-reverse
: те саме, щоrow-reverse
і знизу вгору
гнучке обгортання
За замовчуванням усі елементи flex намагатимуться вмістити в один рядок. Ви можете змінити це і дозволити предметам обгортати це властивість за необхідності.
.container ( flex-wrap: nowrap | wrap | wrap-reverse; )
nowrap
(за замовчуванням): усі гнучкі елементи будуть в одному рядкуwrap
: елементи flex будуть переноситися на кілька рядків, зверху вниз.wrap-reverse
: елементи flex будуть переноситися на кілька рядків знизу вгору.
Тут є кілька наочних демонстрацій flex-wrap
.
flex-flow
Це скорочення для властивостей flex-direction
і flex-wrap
, які в сукупності визначають головну та поперечну осі гнучкого контейнера. Значення за замовчуванням - row nowrap
.
.container ( flex-flow: column wrap; )
виправданий зміст
Це визначає вирівнювання вздовж головної осі. Це допомагає розподілити зайвий вільний простір, коли або всі гнучкі елементи на рядку негнучкі, або гнучкі, але досягли максимального розміру. Він також здійснює певний контроль за вирівнюванням елементів, коли вони переповнюють рядок.
.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )
flex-start
(за замовчуванням): елементи упаковуються до початку гнучкого напрямку.flex-end
: предмети упаковані до кінця гнучкого напрямку.start
: елементи упаковані до початкуwriting-mode
напрямку.end
: предмети упаковані до кінцяwriting-mode
напрямку.left
: елементи упаковані до лівого краю контейнера, якщо це не має сенсуflex-direction
, тоді це поводиться якstart
.right
: елементи упаковані до правого краю контейнера, якщо це не має сенсу зflex-direction
, тоді він поводиться якend
.center
: елементи розташовані по центру вздовж лініїspace-between
: елементи рівномірно розподілені по рядку; перший елемент - у початковому рядку, останній - у кінцевому рядкуspace-around
: елементи рівномірно розподілені в рядку з рівним простором навколо них. Зверніть увагу, що візуально пробіли не рівні, оскільки всі елементи мають однаковий простір з обох сторін. Перший елемент матиме одну одиницю простору проти краю контейнера, але дві одиниці простору між наступним елементом, оскільки цей наступний елемент має власний інтервал, який застосовується.space-evenly
: елементи розподілені так, щоб інтервал між будь-якими двома елементами (і простір до країв) був рівним.
Зверніть увагу, що підтримка браузером цих значень є нюансовою. Наприклад, space-between
ніколи не отримував підтримки деяких версій Edge, а початок / кінець / ліворуч / праворуч ще не в Chrome. MDN має докладні графіки. Найбезпечніші значення flex-start
, flex-end
і center
.
Існує також два додаткові ключові слова, які можна поєднати з цими значеннями: safe
і unsafe
. Використовуючи, safe
гарантуєте, що як би ви не робили цей тип позиціонування, ви не можете натиснути елемент таким чином, щоб він відображався поза екраном (наприклад, зверху) таким чином, що вміст також не можна прокручувати (так звана "втрата даних") .
вирівнювання елементів
Це визначає поведінку за замовчуванням для того, як гнучкі елементи розміщуються вздовж поперечної осі на поточній лінії. Подумайте про це як про justify-content
версію для поперечної осі (перпендикулярної до головної осі).
.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )
stretch
(за замовчуванням): розтягніть для заповнення контейнера (все ще дотримуйтесь мінімальної ширини / максимальної ширини)flex-start
/start
/self-start
: Елементи розміщені на початку поперечної осі. Різниця між ними незначна і полягає у дотриманніflex-direction
правил чиwriting-mode
правил.flex-end
/end
/self-end
: Елементи розміщені в кінці поперечної осі. Різниця знову ж тонка і полягає у дотриманніflex-direction
правил протиwriting-mode
правил.center
: елементи розташовані в центрі поперечної осіbaseline
: елементи вирівняні так, як їх базові лінії
safe
І unsafe
модифікують ключові слова може бути використані в поєднанні з усіма іншими з цих ключових слів (хоча підтримка примітка браузера), і угоду з допомагаючи запобігти вирівнювання елементів таким чином, що зміст стає недоступним.
align-content
Це вирівнює лінії гнучкого контейнера, коли в поперечній осі є додатковий простір, подібно до того, як justify-content
вирівнюються окремі елементи в межах головної осі.
Примітка: Ця властивість набуває чинності лише для багаторядкових гнучких контейнерів, де flex-flow
встановлено значення wrap
або wrap-reverse
). Однорядковий гнучкий контейнер (тобто там, де flex-flow
встановлено значення за замовчуванням, no-wrap
) не відображатиметься align-content
.
.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )
normal
(за замовчуванням): елементи упаковуються у положення за замовчуванням, як ніби значення не встановлено.flex-start
/start
: елементи, упаковані до початку контейнера. (Більше підтримується)flex-start
відзначає,flex-direction
тоді якstart
-writing-mode
напрямок.flex-end
/end
: предмети, упаковані до кінця контейнера. (Більша підтримка)flex-end
відзначає,flex-direction
тоді як кінець -writing-mode
напрямок.center
: елементи, відцентровані в контейнеріspace-between
: предмети рівномірно розподілені; перший рядок знаходиться на початку контейнера, а останній - в кінціspace-around
: елементи рівномірно розподілені з рівним простором навколо кожного рядкаspace-evenly
: предмети розподіляються рівномірно з рівним простором навколо нихstretch
: лінії розтягуються, щоб зайняти залишок місця
safe
І unsafe
модифікують ключові слова може бути використані в поєднанні з усіма іншими з цих ключових слів (хоча підтримка примітка браузера), і угоду з допомагаючи запобігти вирівнювання елементів таким чином, що зміст стає недоступним.
Властивості для дітей
(гнучкі елементи)
порядок
За замовчуванням гнучкі елементи розміщуються у вихідному порядку. Однак order
властивість контролює порядок, у якому вони відображаються у флекс-контейнері.
.item ( order: 5; /* default is 0 */ )
гнучко-рости
Це визначає здатність гнучкого виробу рости, якщо це необхідно. Він приймає безрозмірне значення, яке служить пропорцією. Це диктує, який обсяг доступного місця всередині гнучкого контейнера повинен займати елемент.
Якщо для всіх елементів flex-grow
встановлено значення 1, залишок місця в контейнері буде розподілено порівну для всіх дітей. Якщо одне з дітей має значення 2, решта місця займе вдвічі більше місця, ніж інші (або спробує, принаймні).
.item ( flex-grow: 4; /* default 0 */ )
Мінус-числа недійсні.
згинання
Це визначає здатність гнучкого предмета стискатися, якщо це необхідно.
.item ( flex-shrink: 3; /* default 1 */ )
Мінус-числа недійсні.
гнучка основа
Це визначає розмір елемента за замовчуванням до розподілу залишку місця. Це може бути довжина (наприклад, 20%, 5rem тощо) або ключове слово. auto
Ключове слово означає «погляд на моїй ширині або висоту майно» (яке було тимчасово зроблено по main-size
ключовим словом , поки не рекомендується). У content
ключовому слові означає «розмір його на основі вмісту елемента» - це ключове слово не ініціює дуже добре ще підтримується, так що важко випробування і важче знати , що брати його max-content
, min-content
і fit-content
зробити.
.item ( flex-basis: | auto; /* default auto */ )
Якщо встановити значення 0
, додатковий простір навколо вмісту не враховується. Якщо встановити значення auto
, додатковий простір розподіляється на основі його flex-grow
значення. Див. Цю графіку.
згинати
Це скорочення flex-grow,
flex-shrink
і flex-basis
комбіноване. Другий і третій параметри ( flex-shrink
і flex-basis
) необов’язкові. За замовчуванням це 0 1 auto
, але якщо ви встановлюєте його з одним числовим значенням, це як 1 0
.
.item ( flex: none | ( ? || ) )
Рекомендується використовувати цю скорочену властивість, а не встановлювати окремі властивості. Стенографія інтелектуально встановлює інші цінності.
вирівняти-само
Це дозволяє замінити вирівнювання за замовчуванням (або те, яке вказано align-items
) для окремих гнучких елементів.
Будь ласка, перегляньте align-items
пояснення, щоб зрозуміти доступні значення.
.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )
Зверніть увагу , що float
, clear
і vertical-align
не робить ніякого впливу на гнучкий пункті.
Приклади
Почнемо з дуже простого прикладу, вирішення майже повсякденної проблеми: ідеальне центрування. Не може бути простіше, якщо ви використовуєте flexbox.
.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )
Це покладається на той факт, що запас, встановлений auto
у гнучкому контейнері, поглинає додатковий простір. Тож встановлення вертикального поля auto
зробить предмет ідеально центрованим по обох осях.
Тепер давайте використаємо ще деякі властивості. Розгляньте список із 6 предметів, усі з фіксованими розмірами, але можуть бути автоматично розміреними. Ми хочемо, щоб вони були рівномірно розподілені по горизонтальній осі, щоб, коли ми змінюємо розмір браузера, все було гарно масштабовано і без запитів медіа.
.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )
Готово. Все інше - це лише якась проблема стилізації. Нижче наведено перо з цим прикладом. Обов’язково перейдіть до CodePen і спробуйте змінити розмір вікон, щоб побачити, що трапиться.
Давайте спробуємо щось інше. Уявіть, що у нас є вирівняний по правому краю елемент навігації у верхній частині нашого веб-сайту, але ми хочемо, щоб він був зосереджений на екранах середнього розміру та одноколонний на невеликих пристроях. Досить просто.
/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )
Давайте спробуємо щось ще краще, граючи в гнучкі гнучкі предмети! А як щодо мобільного першого макета з 3 колонками з повною шириною верхнього та нижнього колонтитула. І незалежно від замовлення джерела.
.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )
Префікс Flexbox
Flexbox вимагає певної префікса постачальника, щоб підтримувати більшість браузерів. Це не просто включає попередні властивості з префіксом постачальника, але насправді є абсолютно різні імена властивостей та значень. Це пояснюється тим, що специфікація Flexbox з часом змінювалася, створюючи «стару», «твінерну» та «нову» версії.
Можливо, найкращий спосіб вирішити це - написати новий (і остаточний) синтаксис і запустити ваш CSS через Autoprefixer, який дуже добре обробляє резервні копії.
Крім того, ось Sass, @mixin
щоб допомогти з деякими префіксами, який також дає вам уявлення про те, які дії потрібно робити:
@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )
Пов’язані властивості
- Повне керівництво по сітці
- Записи альманаху щодо властивостей сітки, наприклад grid-row / grid-column
Інші ресурси
- Flexbox у специфікаціях CSS
- Flexbox на MDN
- Flexbox в Опері
- Занурення у Flexbox від Bocoup
- Змішування синтаксисів для кращої підтримки браузера на CSS-Tricks
- Flexbox від Рафаеля Геттера (Франція)
- Flexplorer від Bennett Feely
Помилки
Flexbox, звичайно, не позбавлений помилок. Найкраща їх колекція, яку я бачив, - це Філіп Уолтон та Flexbugs Грега Вітворта. Це місце з відкритим кодом, щоб відстежувати їх усіх, тому я думаю, що найкраще просто посилатися на це.
Підтримка браузера
Розбитий за “версією” flexbox:
- (new) означає останній синтаксис із специфікації (наприклад
display: flex;
) - (tweener) означає непарний неофіційний синтаксис 2011 року (наприклад
display: flexbox;
) - (старий) означає старий синтаксис 2009 року (наприклад
display: box;
)
Chrome | Сафарі | Firefox | Опера | IE | Край | Android | iOS |
---|---|---|---|---|---|---|---|
20- (старий) 21+ (новий) | 3.1+ (старий) 6.1+ (новий) | 2-21 (старий) 22+ (новий) | 12.1+ (новий) | 10 (твінер) 11+ (новий) | 17+ (нові) | 2.1+ (старий) 4.4+ (новий) | 3,2+ (старий) 7,1+ (новий) |
Браузер Blackberry 10+ підтримує новий синтаксис.