Повне керівництво по Flexbox - CSS-хитрощі

Зміст:

Anonim

Передумови

Модуль 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+ підтримує новий синтаксис.