Модуль розмітки Flexbox (від англійського Flexible Box - гнучкий блок), що знаходиться на даний момент на етапі «Можлива рекомендація» стандартизації W3C (W3C Candidate Recommendation) націлений на забезпечення більш ефективного способу розмітки, вирівнювання і розподілу місця між елементами в контейнері, навіть якщо їх розмір невідомий і / або визначається динамічно (ось чому його назвали «гнучкий»).
Основна ідея, що стоїть за гнучкою розміткою - це наділити контейнер здатністю змінювати висоту / ширину (і порядок) його елементів для оптимального заповнення доступного простору (в основному для підтримки всіх видів і розмірів екранів).
Flex -контейнери розтягує елементи, щоб заповнити вільний простір або стискає їх, щоб запобігти виходу за межі.
Що найбільш важливо, розмітка Flexbox не залежить від напрямку, на противагу звичайним розмітка (блокам, які орієнтовані вертикально і рядковим елементам, розташованим горизонтально).
І хоча елементи звичайної розмітки добре працюють для сторінок, їм не вистачає гнучкості (і це не гра слів) для підтримки великих і складних додатків (особливо якщо мова заходить про зміну орієнтації, розмірів, розтягу, стиску і так далі).
Примітка. розмітка Flexbox найкраще підходить для компонентів програми та невеликих макетів, в той час як розмітка за допомогою grid призначена для верстки більш масштабних макетів.
Основні поняття і терміни
Так як Flexbox це цілий модуль, а не окрема властивість, він включає в себе багато елементів, в тому числі і цілий набір властивостей. Деякі з них призначені для застосування до контейнера (батьківського елементу, відомого як flex-контейнер), в той час як інші повинні бути застосовані до дочірнім елементам (назвемо їх flex-елементи).
Якщо звичайна розмітка грунтується на напрямках блоків і малих елементів, то flex -розмітку базується на напрямках flex -потока. Будь ласка, зверніть увагу на наведену нижче схему з специфікації, яка пояснює основну ідею, що стоїть за flex -розмітку:
- main axis - це головна вісь flex -контейнери, уздовж якої розміщуються flex -елементи. Будьте обережні, вона не обов'язково розташовується горизонтально, її положення залежить від властивості flex-direction (дивіться нижче);
- main-start | main-end - flex -елементи розташовуються усередині контейнера, починаючи від точки main-start. і доходять до точки main-end;
- main size - це ширина або висота flex -елементом, в залежності від основної величини. Як значення властивості main size може бути встановлено значення ширини або висоти;
- cross axis - поперечна вісь, перпендикулярна головної осі. Її напрямок залежить від напрямку головної осі.
- cross-start | cross-end - flex -строкі заповнюються елементами і розміщуються в контейнері, починаючи з боку cross-start у напрямку до стороні cross-end;
- cross size - ширина або висота flex -елементом, в залежності від обраної розмірності. Властивість може мати значення або ширини, або висоти поперечної розмірності.
Властивості батьківського класу (flex-контейнера)
Це властивість визначає flex -контейнери: рядкової або блоковий, в залежності від встановленого значення. Також воно дозволяє flex -контекст для всіх його прямих нащадків:
Відзначимо, що CSS -столбци (columns) не мають ефекту у flex -контейнери.
flex-direction
Це властивість задає головну вісь, що визначає напрямок, в якому розміщуються flex -елементи у flex -контейнери. Flexbox (за винятком опціонального обгортання) є концептом односпрямованої розмітки.
Уявіть, що flex -елементи в першу чергу розташовуються або в горизонтальних, або вертикальних колонках:
- row (за замовчуванням): зліва направо для ltr; справа наліво для rtl;
- row-reverse. справа наліво для in ltr; зліва направо для rtl;
- column. так само як row. але зверху вниз;
- column-reverse. так само як row-reverse. але від низу до верху.
За замовчуванням flex -елементи спробують втиснутися в одну лінію. Ви можете змінити це, і обернути елементи як потрібно за допомогою цієї властивості. Тут грає роль і напрямок, в якому розташовуються нові лінії:
- nowrap (за замовчуванням): однорядковий / зліва направо для ltr; справа наліво для rtl;
- wrap. багатостроковий / зліва направо для ltr; справа наліво для rtl;
- wrap-reverse. багатостроковий / справа наліво для ltr; зліва направо для rtl.
flex-flow (застосовується до батьківського елементу flex-контейнера)
Це скорочена форма властивостей flex-direction і flex-wrap. які разом визначають головну і поперечну осі flex -контейнери. За замовчуванням задається значення row nowrap:
justify-content
Дана властивість задає вирівнювання вздовж головної осі. Це допомагає розподілити зайве вільний простір, в тому випадку, якщо всі flex -елементи в рядку негнучкі, або гнучкі, але досягли свого максимального розміру. Також дане властивість дозволяє отримати контроль над вирівнюємо елементів, коли вони виходять за межі рядка:
- flex-start (за замовчуванням): елементи вирівнюються до початку рядка;
- flex-end. елементи вирівнюються до кінця рядка;
- center. елементи вирівнюються по центру рядка;
- space-between. елементи розподіляються в рядку рівномірно: перший елемент розташовується на початку рядка, останній - в кінці;
- space-around. елементи розподіляються в рядку рівномірно з однаковим відстанню між собою.
align-items
Це властивість визначає те, як за замовчуванням розташовуються flex -елементи щодо поперечної осі на поточному рядку. Його можна вважати версією justify-content для поперечної осі (перпендикулярної головної):
- flex-start. межа елементів cross-start розташовується на лінії cross-start;
- flex-end. межа елементів cross-start розташовується на лінії cross-end;
- center. елементи розташовуються по центру поперечної осі;
- baseline. вирівнювання елементів відбувається згідно базової лінії;
- stretch (за замовчуванням): елементи розтягуються для того, щоб заповнити контейнер (з урахуванням значень min-width / max-width).
align-content
Це властивість дозволяє вирівнювати рядки всередині flex -контейнери, коли є вільне місце на поперечної осі, що схоже з тим, як властивість justify-content вирівнює окремі елементи щодо головної осі.
Примітка. це властивість не буде працювати, якщо є тільки один рядок flex-елементів:
- flex-start. рядки розташовуються на початку контейнера;
- flex-end. рядки розташовуються в кінці контейнера;
- center. рядки розташовуються посередині контейнера;
- space-between. рядки розподіляються рівномірно; перший рядок - на початку контейнера, а остання - в кінці;
- space-around. рядки розміщені рівномірно на однаковій відстані одна від одної;
- stretch (за замовчуванням): рядки розтягуються, щоб заповнити простір, що залишився.
Властивості дочірніх елементів
(Flex-елементи)
За замовчуванням, flex -елементи розташовуються в порядку, заданому джерелом. Однак властивість order контролює порядок, в якому елементи з'являються у flex -контейнери:
Це властивість дозволяє flex -елементом «розростатися» в разі потреби. Воно приймає безрозмірне значення, що служить в якості пропорції. Це значення визначає, який обсяг доступного простору всередині flex -контейнери може зайняти елемент.
Якщо для всіх елементів властивість flex-grow встановлено в 1, то для кожного дочірнього елемента буде поставлено однаковий розмір всередині контейнера. Якщо ви встановите для одного з дочірніх елементів значення 2, то він займе в два рази більше місця, ніж інші:
Негативні числа неприпустимі.
flex-shrink
Це властивість визначає для flex-елементів можливість стискатися в разі потреби:
Негативні числа неприпустимі.
flex-basis
Це властивість визначає розмір елементів за замовчуванням перед розподілом простору, що залишилося:
Ця властивість є скороченою формою для комбінації властивостей flex-grow, flex-shrink і flex-basis. Другий і третій параметри (flex-shrink і flex-basis) задаються опціонально. Значення за замовчуванням: 0 1 auto:
align-self
Це властивість дозволяє перевизначити вирівнювання, заданий за замовчуванням (або певний властивістю align-items) для окремих flex-елементів.
Доступні значення ви можете знайти в описі властивості align-items:
Зверніть увагу, що float. clear і vertical-align не працюють з flex-елементів.
Давайте почнемо з дуже простого прикладу, вирішивши практично щоденну проблему: ідеальне вирівнювання по центру. Немає нічого простішого, якщо використовувати flexbox:
Цей приклад ґрунтується на тому факті, що властивість margin. встановлене в значення auto. поглинає зайвий простір. Тому таке завдання відступу вирівнює елемент рівно по центру від обох осей.
Тепер давайте скористаємося ще декількома властивостями. Припустимо, що у нас є список з 6 елементів, всі вони фіксованого розміру (для естетичності), але з можливістю автоматичного заповнення.
Ми хочемо, щоб вони були красиво, рівномірно розподілені по горизонтальній осі таким чином, щоб при зміні розміру вікна браузера, все виглядало добре (без використання медіа запитів):
Готово! Все інше - вже питання оформлення. Тут розташовується демонстрація цього прикладу. Перейдіть по посиланню і спробуйте змінити розмір вікна, щоб подивитися, що станеться:
Давайте спробуємо ще дещо. Припустимо, у нас на самому верху веб-сайту знаходиться меню навігації, вирівняне вправо, але ми хочемо, щоб на екранах середнього розміру воно розташовувалося по центру, а для пристроїв з маленьким екраном - розташовувалося в один стовпець. Все досить просто:
Давайте спробуємо зробити ще краще, погравши з "гнучкістю" flex-елементів. Як щодо мобільного розмітки в три стовпці з заголовком і підвалом на всю ширину? І з висновком елементів, незалежним від порядку, заданого вихідним кодом:
Використання префіксів для flexbox
Flexbox вимагає використання Вендорний префіксів для можливості підтримки більшістю браузерів. Це включає в себе не тільки використання Вендорний префіксів перед властивостями, але і повністю різні назви властивостей і значень.
А все тому, що специфікація flexbox змінювалася з плином часу, створивши "old" (стару), "tweener" (проміжну), і "new" (нову) версії.
Можливо, найкращий вихід в цій ситуації - це писати код, використовуючи новий (і фінальний) синтаксис і пропускати CSS через Autoprefixer. який дуже добре обробляє відкати до попередніх версій.
В якості альтернативи, нижче наведено Sass метод @mixin для допомоги з деякими префіксами, який до того ж розкриває ідею того, які дії повинні бути зроблені: