Новости
- Чому Flexbox?
- Розберемо простий приклад
- Визначаємо, які елементи розмістити у вигляді flex блоків
- Усередині flex моделі
- Стовпці або рядки?
- перенесення рядків
- flex-flow скорочення
- Гнучке зміна розмірів flex елементів
- flex: короткий код проти розгорнутого
- Горизонтальне і вертикальне вирівнювання
- Порядок елементів flex
- Вкладені flex блоки
- Сумісність з браузерами
- Підсумуємо
Це нова технологія, яка вже має досить широку підтримку браузерів. 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?
Стовпці або рядки?