Flexbox

  1. Чому Flexbox?
  2. Розберемо простий приклад
  3. Визначаємо, які елементи розмістити у вигляді flex блоків
  4. Усередині flex моделі
  5. Стовпці або рядки?
  6. перенесення рядків
  7. flex-flow скорочення
  8. Гнучке зміна розмірів flex елементів
  9. flex: короткий код проти розгорнутого
  10. Горизонтальне і вертикальне вирівнювання
  11. Порядок елементів flex
  12. Вкладені flex блоки
  13. Сумісність з браузерами
  14. Підсумуємо

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

Необхідні навички: HTML основи (вивчіть Введення в HTML ), Знання того, як працює CSS (вивчіть Вступ в CSS ). Мета: Дізнатися, як використовувати систему адаптуються блоків Flexbox для створення веб-макетів.

Чому Flexbox?

Довгий час єдиними надійними інструментами CSS верстки були такі способи як Float (обтікання) і позиціонування.

З їх допомогою складно або неможливо досягти наступних простих вимог до макету:

  • Вертикального вирівнювання блоку всередині батька.
  • Оформлення всіх дітей контейнера так, щоб вони розподілили між собою доступну ширину / висоту, незалежно від того, скільки ширини / висоти доступно.
  • Зробити все колонки в макеті однакової висоти, навіть якщо наповнення в них по-різному.

Як ви побачите в наступних розділах, flexbox значно полегшує роботу з макетами. Занурюємося!

Розберемо простий приклад

У цій статті ви пропрацюєте серію вправ, які допоможуть зрозуміти, як працює flexbox. Щоб почати, скачайте на комп'ютер стартовий файл - flexbox0.html з нашого Github сховища - завантажте його в сучасному браузері (Firefox або Chrome), а також в улюбленому редакторі коду. Також ви можете подивитися його наживо .

Ви побачите елемент <Header> з заголовком верхнього рівня всередині, і елемент <Section> що містить три елементи <Article> . Ми будемо використовувати їх для створення стандартного трехколоночной макета.

Ми будемо використовувати їх для створення стандартного трехколоночной макета

Визначаємо, які елементи розмістити у вигляді flex блоків

Для початку нам потрібно вибрати, які елементи слід викладати у вигляді flex блоків. Для цього ми встановлюємо спеціальне значення display в батьківському елементі тих елементів, які ви хочете оформити. У нашому випадку ми хочемо розташувати елементи <Article> , Тому ми встановлюємо це значення на <Section> (Який стає flex контейнером):

section {display: flex; }

В результаті у нас вийде ось так:

Так, всього одне оголошення робить все, що нам потрібно - здорово, правда? Ми отримали 3-х стовпчик макет з колонками рівних розмірів по ширині і висоті. Це пов'язано з тим, що значення за замовчуванням, задані для flex елементів (дочірні елементи flex контейнера), налаштовані для вирішення основних завдань. Детальніше про це пізніше.

Примітка: Ви також можете встановити значення display inline-flex, якщо хочете розставити inline елементи як flex блоки.

Усередині flex моделі

Коли елементи викладені як flex блоки, вони розташовуються уздовж двох осей:

  • Головна вісь (main axis) проходить в тому напрямку, уздовж якого розташовані Flex елементи (наприклад, в рядок зліва направо або уздовж колонок вниз.) Початок і кінець цієї осі називаються main start і main end.
  • Поперечна вісь (Сross axis) проходить перпендикулярно Flex елементам. Початок і кінець цієї осі називаються cross start and cross end.
  • Батьківський елемент, на який призначено властивість display: flex ( <Section> в нашому прикладі) називається flex container.
  • Елементи, розміщені в ньому як Flex блоки називаються flex items (в нашому прикладі це <Article> ).

Запам'ятайте ці терміни, вони стануть в нагоді вам в наступних розділах.

Стовпці або рядки?

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

Спробуйте додати наступний рядок в ваш файл:

flex-direction: column

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

Примітка: Ви можете також розташовувати flex елементи в зворотному напрямку, використовуючи значення row-reverse і column-reverse. Спробуйте їх теж!

перенесення рядків

Проблема може бути в тому, що, якщо у вас фіксована ширина або висота макета, ваші flexbox елементи переповнять контейнер і порушать макет. Подивіться на цей приклад: flexbox-wrap0.html і подивіться його наживо (Збережіть його собі на комьютер, якщо хочете вивчити цей приклад):

Ми бачимо, що дочірні елементи вибиваються зі свого батька-контейнера. Один із способів як це виправити - це додати наступне властивість:

flex-wrap: wrap

Спробуйте, і ви побачите, що так макет став виглядати набагато краще:

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

Але ми можемо піти далі. Перш за все, спробуйте змінити значення властивості flex-direction на row-reverse - тепер у вас також макет в кілька рядків, але він починається з протилежного кутка вікна браузера і тепер вибудовується в зворотному порядку.

flex-flow скорочення

На цьому етапі потрібно зауважити, що існує скорочення для властивостей flex-direction і flex-wrap - flex-flow . Наприклад, ви можете замінити

flex-direction: row; flex-wrap: wrap;

на

flex-flow: row wrap;

Гнучке зміна розмірів flex елементів

Тепер давайте повернемося до нашого першого прикладу і погляньмо, як ми можемо контролювати, в яких пропорціях flex елементи будуть займати місце. Увімкніть свою копію файлу flexbox0.html , Або скачайте flexbox1.html ( перегляд ).

Перш за все, додамо наступне правило в кінець вашого CSS коду:

article {flex: 1; }

Це безрозмірна значення пропорції, яке вказує, скільки вільного простору на головній осі (main axis) кожен flex елемент зможе зайняти. У цьому випадку, ми даємо кожному елементу <Article> значення 1, а це значить, що вони будуть займати однакову кількість вільного місця в макеті, яке залишилося після установки властивостей padding і margin.

Тепер додайте наступне правило в рядок після попереднього:

article: nth-of-type (3) {flex: 2; }

Оновивши сторінку, ви побачите, що третій елемент <Article> займає в два рази більше доступною ширини, ніж два інших - разом тепер доступно 4 одиниці пропорції. Перші два flex елемента мають по одній одиниці, тому беруть 1/4 простору кожен. А у третього 2 одиниці, так що він бере 2/4 вільного місця (або 1/2).

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

article {flex: 1 200px; } Article: nth-of-type (3) {flex: 2 200px; }

Це просто означає, що кожному flex елементу спочатку буде дано 200px від вільного місця. Потім місце, що залишилося буде поділено відповідно до частин пропорцій. Оновлення сторінку, і ви побачите різницю, як простір поділений тепер.

Оновлення сторінку, і ви побачите різницю, як простір поділений тепер

Справжня цінність flexbox можна побачити в його гнучкості / чуйності - якщо змінити розмір вікна або додати ще елемент <Article> , Макет буде і далі виглядати також добре.

flex: короткий код проти розгорнутого

flex це скорочене властивість, в яких можна задати до трьох різних властивостей:

  • Значення пропорції, яке ми обговорювали вище. Воно може бути встановлено окремо за допомогою властивості flex-grow .
  • Наступне значення пропорції - flex-shrink - вступає в роль, коли flex елементи переповнюють контейнер. Воно вказує, скільки забирається від розміру кожного flex елемента, щоб він перестав переповнювати контейнер. Це просунута функція flexbox, і в цьому параграфі ми не будемо її розбирати.
  • Значення мінімального розміру, як ми обговорювали раніше. Воно може бути встановлено окремо за допомогою властивості flex-basis .

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

Горизонтальне і вертикальне вирівнювання

Flexbox також має функції для вирівнювання flex елементів уздовж основної (main) або поперечної (cross) осей. Розглянемо їх на новому прикладі - flex-align0.html ( перегляд ) - який ми перетворимо в акуратну, гнучку кнопкову панель інструментів. На даний момент ви бачите горизонтальну панель меню, кнопки якої застрягли в верхньому лівому кутку.

Спочатку зробіть собі копію цього прикладу.

Тепер додайте наступний рядок в низ коду CSS:

div {display: flex; align-items: center; justify-content: space-around; }

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

align-items контролює, де на поперечної осі знаходяться flex елементи.

  • За замовчуванням стоїть значення stretch, яке розтягує все flex елементи, щоб заповнити батька уздовж поперечної (cross axis) осі. Якщо у батьків немає фіксованої ширини уздовж поперечної осі, все flex елементи візьмуть довжину найдовшого flex елемента. Ось чому наш перший приклад за замовчуванням отримав стовпці з однаковою висотою.
  • Значення center, яке ми використовували в коді вгорі, змушує елементи зберігати свої власні розміри, але центрує їх уздовж поперечної осі. Ось чому кнопки поточного прикладу центровані по вертикалі.
  • Також є значення flex-start і flex-end, які вирівнюють всі елементи по початку і кінця поперечної осі відповідно. Див. Докладніше align-items .

Ви можете перевизначити align-items поведінка для окремих flex елементів, застосувавши властивість align-self до них. Наприклад, спробуйте додати ці рядки в код:

button: first-child {align-self: flex-end; }

Подивіться, що сталося і видаліть ці рядки.

justify-content контролює, де flex елементи розташовуються на головній осі.

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

Спробуйте трохи пограти з цими значеннями перш ніж продовжити

Порядок елементів flex

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

Код тут простий: спробуйте додати наступний CSS вниз вашого коду прикладу:

button: first-child {order: 1; }

і тепер ви побачите, що кнопка «Посмішка» перемістилася в кінець головної осі. Давайте тепер поговоримо докладніше про те, як це працює:

  • За замовчуванням всі елементи flex мають значення order рівне 0.
  • Елементи Flex з встановленими на них більшими значеннями будуть відображатися пізніше в порядку відображення, ніж елементи з меншими значеннями порядку.
  • Елементи Flex з однаковим значенням порядку будуть відображатися у вихідному порядку. Так, якщо у вас є чотири елементи з порядковими значеннями 2, 1, 1 і 0, встановленими на них відповідно, їх порядок відображення буде 4-й, 2-й, 3-й, потім 1-й.
  • Третій елемент з'являється після другого, тому що він має те ж значення порядку і знаходиться після нього в порядку написання.

Ви можете встановити негативні значення, щоб елементи відображалися раніше, ніж елементи з встановленим 0. Наприклад, ви можете зробити, щоб кнопка «Blush» з'являлася на початку основної осі, використовуючи наступне правило:

button: last-child {order: -1; }

Вкладені flex блоки

Можна створити кілька досить складних макетів за допомогою flexbox. Абсолютно нормально зробити flex елемент flex контейнером, щоб його нащадки також були flex блоками. Подивіться на complex-flexbox.html ( см. вживу ).

HTML для цього досить простий. У нас є елемент <Section> , Що містить три <Article> . третій <Article> містить ще три <Div> .

section - article article article - div - button div button div button button button

Давайте подивимося на код, який ми використовували для макета.

Перш за все, ми встановлюємо дочірні елементи <Section> у вигляді flex блоків.

section {display: flex; }

Потім ми встановлюємо кілька значень на самих <Article> . Зверніть увагу на друге правило: ми встановлюємо третій <Article> , Щоб його діти були в макеті у вигляді flex блоків, але на цей раз ми маємо в своєму розпорядженні їх як стовпець.

article {flex: 1 200px; } Article: nth-of-type (3) {flex: 3 200px; display: flex; flex-flow: column; }

Потім ми беремо перший <Div> . Спочатку ми пишемо flex: 1 100px; щоб дати йому мінімальну висоту 100px, потім ми встановлюємо його дочірні елементи (елементи <Button> ) Також у вигляді flex блоків. Їм ми призначаємо перенесення блоків і вирівнюємо їх по центру доступного простору, як це було в прикладі з кнопкою.

article: nth-of-type (3) div: first-child {flex: 1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; }

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

button {flex: 1; margin: 5px; font-size: 18px; line-height: 1.5; }

Сумісність з браузерами

Підтримка Flexbox доступна в більшості нових браузерів: Firefox, Chrome, Opera, Microsoft Edge і IE 11, більш пізніх версіях Android / iOS і т. Д .. Однак пам'ятайте, що до сих пір використовуються більш старі браузери, які не підтримують Flexbox (або підтримують, але стару версію.)

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

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

Ми обговоримо можливості подолання проблем підтримки крос-браузерності в наступному модулі.

Підсумуємо

Ми завершуємо нашу статтю з основ flexbox. Сподіваємося, що вам сподобалося, і ви добре розважитеся, подорожуючи далі і вивчаючи його. Далі ми розглянемо ще один важливий аспект макетів CSS - grid-системи.

Чому Flexbox?
Чому Flexbox?
Стовпці або рядки?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: