Практичне застосування FlexBox. Метод позиціонування елементів Flexbox Що таке флекси css

07.12.2023 -

Привіт, хабре!

Одним прекрасним вечором, який не віщує нічого цікавого, до нашого чатика надійшла пропозиція від автора публікації, написаної ним навесні 2012 року, написати статтю-ремейк, але із застосуванням FlexBox та супутнім поясненням що і як працює. Після деякої частки сумнівів, інтерес глибше розібратися в специфікації все-таки переміг і я сів верстати ті самі приклади. У ході занурення в цю область почало з'ясовуватися безліч нюансів, що переросло в щось більше, ніж просто переверстати макетики. Загалом у цій статті хочу розповісти про таку чудову специфікацію під назвою «CSS Flexible Box Layout Module» і показати деякі її цікаві особливості та приклади застосування. Усіх комусь цікаво, люб'язно запрошую під хабракат.

На що хотілося б звернути увагу, для верстки лейауту на FlexBox розробнику знадобиться певний ступінь адаптації. На власному прикладі відчув, що багаторічний досвід грає злий жарт. FlexBox вимагає трохи іншого уявлення про вибудовування елементів у потоці.

Технічна частина

Перш ніж переходити до якихось прикладів, варто розібратися, які властивості входять у цю специфікацію і як вони працюють. Так як деякі з них не дуже зрозумілі спочатку, а деякі оточені міфами, які насправді не мають жодного відношення.

Отже. У FlexBox є два основних типи елементів: Гнучкий Контейнер (Flex Container) та його дочірні елементи - Гнучкі Елементи (Flex Item). Для ініціалізації контейнера достатньо присвоїти, через css, елементу display: flex;або display: inline-flex;. Різниця між flex і inline-flex полягає лише в принципі взаємодії з оточуючими контейнерами елементами, подібно display: block; та display: inline-block;, відповідно.

Усередині гнучкого контейнера створюються дві осі, головна вісь (main-axis) та перпендикулярна або крос вісь (cross axis). Переважно гнучкі елементи шикуються саме по головній осі, а потім уже по крос осі. За умовчанням головна вісь горизонтальна і має напрямок ліворуч, а крос вісь вертикальна і спрямована зверху вниз.

Напрямком осей можна керувати за допомогою CSS-властивості flex-direction. Ця властивість набуває ряду значень:
row(default): Головна вісь гнучкого контейнера має ту ж орієнтацію, як і інлайн вісь поточного режиму спрямування рядків . Початок (main-start) та кінець (main-end) напряму головної осі відповідають початку (inline-start) та кінцю (inline-end) інлайн осі (inline-axis).
row-reverse: Все те саме, що і в row тільки main-start і main-end міняються місцями
column: так само, як і row, тільки тепер головна вісь спрямована зверху вниз.
column-reverse: так само, як row-reverse, тільки головна вісь спрямована знизу вгору.
Як це працює можна подивитися у прикладі на jsfiddle.

За замовчуванням усі гнучкі елементи в контейнері укладаються в один рядок, навіть якщо не поміщаються в контейнер, вони виходять за його межі. Ця поведінка перемикається за допомогою властивості flex-wrap. Ця властивість має три стани:
nowrap(default): гнучкі елементи вишиковуються в один рядок зліва направо.
wrap: гнучкі елементи будуються в багаторядковому режимі, перенесення здійснюється у напрямку крос осі, зверху донизу.
wrap-reverse: так само, як і wrap, але перенесення відбувається знизу вгору.
Дивимося приклад.

Для зручності є додаткова властивість flex-flow, в якому можна одночасно вказати flex-directionі flex-wrap. Виглядає це так: flex-flow:

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

Це ще не все, ми також маємо можливість вирівнювання елементів по крос осі. Застосувавши властивість align-items, яке приймає також п'ять різних значень, можна досягти цікавої поведінки. Ця властивість дозволяє вирівнювати елементи в рядку один одного.
flex-start: всі елементи притискаються до початку рядка
flex-end: елементи притискаються до кінця рядка
center: елементи вирівнюються по центру рядка
baseline: елементи вирівнюються по базовій лінії тексту
stretch(default): елементи розтягуються повністю заповнюючи рядок.

Ще одна схожа властивість на попередню це align-content. Тільки воно відповідає за вирівнювання цілих рядків щодо гнучкого контейнера. Воно не даватиме ефекту, якщо гнучкі елементи займають один рядок. Властивість набуває шести різних значень.
flex-start: всі лінії притискаються до початку крос-осі
flex-end: всі лінії притискаються до кінця крос-осі
center: Всі лінії паком вирівнюються по центру крос осі.
space-between: лінії розподіляються від верхнього краю до нижнього залишаючи вільний простір між рядками, крайні рядки притискаються до країв контейнера.
space-around: лінії рівномірно розподіляються контейнером.
stretch(default): лінії розтягуються займаючи весь доступний простір.
Спробувати як працюють align-items і align-content можна в цьому прикладі. Я спеціально дві ці властивості представив одному прикладі, оскільки вони досить щільно взаємодіють кожен виконуючи своє завдання. Зверніть увагу, що відбувається коли елементи поміщаються в один рядок і в кілька.

З параметрами гнучкого контейнера розібралися, залишилося розібратися із властивостями гнучких елементів.
Перше властивість з яким ми познайомимося це order. Ця властивість дозволяє змінювати позицію в потоці конкретного елемента. За замовчуванням усі гнучкі елементи мають order: 0;і будуються як природного потоку. У прикладі можна побачити як міняються місцями елементи, якщо до них застосовувати різні значення order.

Одна з основних властивостей є flex-basis. За допомогою цієї якості ми можемо вказувати базову ширину гнучкого елемента. За замовчуванням має значення auto. Ця властивість тісно пов'язана з flex-growі flex-shrink, Про які я розповім трохи пізніше. Приймає значення ширини px, %, em та інших одиницях. По суті, це не строго ширина гнучкого елемента, це свого роду відправна точка. Щодо якої відбувається розтягування або усадка елемента. У режимі auto елемент отримує базову ширину щодо контенту всередині нього.

flex-growна кількох ресурсах має зовсім некоректний опис. Там йдеться про те, що нібито воно задає співвідношення розмірів елементів у контейнері. Насправді, це не так. Ця властивість визначає фактор збільшення елемента за наявності вільного місця в контейнері. За умовчанням ця властивість має значення 0. Давайте уявімо, що у нас є гнучкий контейнер, який має ширину 500px, всередині нього є два гнучкі елементи, кожен з яких має базову ширину 100px. Тим самим у контейнері залишається ще 300px вільного місця. Якщо першому елементу вкажемо flex-grow: 2;, а другому елементу вкажемо flex-grow: 1; В результаті ці блоки займуть всю доступну ширину контейнера, тільки ширина першого блоку буде 300px, а другого лише 200px. Що ж сталося? А сталося ось що, доступні 300px вільного місця у контейнері розподілилися між елементами у співвідношенні 2:1, +200px першому та +100px другому. Власне, так це і працює.

Тут ми плавно переходимо до іншої аналогічної якості, а саме flex-shrink. За замовчуванням має значення 1. Воно також задає фактор зміну ширини елементів, лише у зворотний бік. Якщо контейнер має ширину меншечим сума базової ширини елементів, то починає діяти це властивість. Наприклад, контейнер має ширину 600px, а flex-basis елементів по 300px. Першому елементу вкажемо flex-shrink: 2; а другому flex-shrink: 1;. Тепер стиснемо контейнер на 300px. Отже сума ширини елементів на 300px більша ніж контейнер. Ця різниця розподіляється у співвідношенні 2:1, виходить від першого блоку забираємо 200px, а від другого 100px. Новий розмір елементів виходить 100px та 200px, у першого та другого елемента, відповідно. Якщо ми встановлюємо flex-shrink значення 0, то ми забороняємо стискатися елементу до розмірів менше ніж його базова ширина.

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

Усі три властивості можна записати у скороченій формі за допомогою виразу flex. Це має такий вигляд:
flex: ;
А так само ми можемо писати ще два скорочені варіанти, flex: auto;і flex: none;, що означає flex: 1 1 auto;і flex: 0 0 auto;відповідно.

Останньою властивістю гнучких елементів залишився align-self. Тут все просто, це те саме, що align-items у контейнера, що дозволяє перевизначати вирівнювання конкретно взятого елемента.

Все, набрид! Приклади давай!

З технічною частиною розібралися, вийшло досить затягнуто, але це потрібно вникнути. Тепер можна перейти до практичного застосування.
У ході верстки тих самих «п'яти дійсно корисних шаблонів адаптивної розмітки» довелося вирішувати типові ситуації, з якими розробник стикається досить часто. З flexbox реалізація цих рішень стає простіше та гнучкіше.
Візьмемо той самий четвертий макет, т.к. у ньому найбільше цікавих елементів.

Для початку позначимо основну ширину сторінки, вирівняємо по центру, притиснемо футер донизу сторінки. Як завжди загалом.

Html ( background: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex-direction: column; : 30px 0 10px; -display: flex; : 960px; min-width: 430px; auto; flex-grow: 1; : 430px; #eee;

За рахунок того, що ми для.main вказали flex-grow: 1; він розтягується на всю доступну висоту, тим самим притискаючи футер донизу. Бонусом у цьому рішенні є те, що футер може бути нефіксованої висоти.

Розмістимо тепер логотип та меню в хедері.
.logo ( font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( background: #222; : 30px; ) .nav ( margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; width: 130px; height: 50px; font-size: 1.5rem; #eee; )

Оскільки для хедера вказано flex-wrap: wrap; та justify-content: space-between; логотип та меню розкидає по різних сторонах хедера, при цьому якщо місця для меню не вистачатиме воно елегантно зміститься під логотип.

Далі ми бачимо великий пост або банер, важко сказати що це конкретно, але і не суть. У нас є картинка праворуч і текст із заголовком зліва. Я особисто дотримуюся ідеї, що будь-які елементи мають бути максимально гнучкими, незалежно від того, чи адаптована це верстка чи статика. Отже у нас є в цьому пості сайд-бар в якому розміщена картинка, строго кажучи, ми не можемо точно сказати яка ширина нам потрібна, бо сьогодні у нас велика картинка, завтра маленька і щоразу переробляти елемент з нуля небажання. Значить, нам потрібно, щоб сайд-бар зайняв потрібне йому місце, а решта пішла на контент. Так і зробимо:

Box ( font-size: 1.25rem; line-height: 1.5; font-style: italic; margin: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; . : auto;

Як ви бачите для.box-base, там де у нас заголовок та текст, я вказав базову ширину за допомогою flex-basis: 430px;, а також заборонив усадку блоку за допомогою flex-shrink: 0;. Цією маніпуляцією ми сказали, що контент не може стати меншим ніж 430px завширшки. А через те, що для.box я вказую flex-wrap: wrap;в той момент, коли сайд-бар та контент не будуть розміщуватись у контейнер.box, сайд-бар автоматично провалиться під контент. І це все без застосування @media! Я вважаю це справді дуже круто.

У нас залишився триколоночний контент. Рішень подібного завдання кілька, я покажу один із них, в решті макетів є й інший варіант.
Створюємо контейнер, назвемо його. content і налаштуємо.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

У контейнері три колонки, .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px;

Задав колонкам базову ширину 200px, щоб колонки не звужувалися прям занадто сильно, нехай краще вони при потребі переносяться один під одного.

За макетом, нам із контентом, обійтися без @media не вийде, тому ще трохи налаштуємо поведінку колонок для ширини<800px и <600px.
@media screen and (max-width: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @media screen and (max-width: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Ось і вся магія, що стосується побудови лейауту на FlexBox. Ще одне завдання, яке мені сподобалося, знаходиться в п'ятому макеті, саме це стосується адаптації контенту.

Ми бачимо, як на десктопній роздільній здатності пости побудовані в сітку по три штуки в ряд. Коли ширина viewport стає меншою за 800px, то сітка перетворюється на колонку з постами, де фото посту вибудовується з лівого та правого боку від контенту посту, по черзі. А при ширині менше 600px фото посту ховається зовсім.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); display: -webkit-flex; display: flex-wrap; 0 1 100%; .grid-title (text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img (flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen and (max-width: 600px) ( .grid-img ( display: none; ) )

Насправді це лише мала частина того, що можна реалізувати на FlexBox. Специфікація дозволяє будувати складні макети сторінок при цьому застосовуючи простий код.

Flexbox можна назвати вдалою спробою вирішення величезного спектра проблем при побудові лейаутів в css. Але перш ніж перейти до його опису, давайте з'ясуємо, що не так зі способами верстки, якими ми користуємося зараз?

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

Сталося так тому, що html та css розвивалися еволюційно. На початку веб-сторінки були схожі на однопотокові текстові документи, трохи згодом розбиття сторінки на блоки робили таблицями, потім стало модним верстати float-ами, а після офіційної смерті ie6 додалися ще й прийоми з inline-block. У результаті ми отримали у спадок гримучу суміш усіх цих прийомів, використовувану для побудови лейаутів 99,9% всіх існуючих веб-сторінок.

Багаторядна організація блоків усередині flex-контейнера.

flex-wrap

Всі приклади, які ми наводили вище, були побудовані з урахуванням однорядкового (одностовбцевого) розташування блоків. Треба сказати, що за умовчанням flex-контейнер завжди розташовуватиме блоки всередині себе в одну лінію. Проте специфікацією також підтримується багаторядковий режим. За багаторядковість усередині flex-контейнера відповідає CSS властивість flex-wrap.

Доступні значення flex-wrap:

nowrap (значення за замовчуванням): блоки розташовані в одну лінію зліва направо (в rtl справа наліво)
wrap: блоки розташовані в кілька горизонтальних рядів (якщо не вміщуються в один ряд). Вони йдуть один за одним зліва направо (в rtl справа наліво)
wrap-reverse: те-що і wrapале блоки розташовуються у зворотному порядку.

flex-flow – зручне скорочення для flex-direction + flex-wrap

По суті, flex-flow надає можливість в одній властивості описати напрямок головної та багаторядковість поперечної осі. Типово flex-flow: row nowrap .

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

CSS

/* тобто. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* це те саме, що... */ .my-flex-block( flex-flow: column wrap;

align-content

Існує також властивість align-content , яка визначає те, яким чином ряди блоків, що утворилися, будуть вирівняні по вертикалі і як вони поділять між собою весь простір flex-контейнера.

Важливо: align-content працює тільки в багаторядковому режимі (тобто у випадку flex-wrap:wrap; або flex-wrap:wrap-reverse;)

Доступні значення align-content:

flex-start: ряди блоків притиснуті до початку flex-контейнера.
flex-end: ряди блоків притиснуті до кінця flex-контейнера
center: ряди блоків знаходяться у центрі flex-контейнера
space-between: перший ряд блоків розташовується на початку flex-контейнера, останній ряд блоків блок – в кінці, всі інші ряди рівномірно розподілені в просторі, що залишився.
space-around: ряди блоків рівномірно розподілені від початку до кінця flex-контейнера, розділяючи весь вільний простір порівну.
stretch (значення за замовчуванням): Ряди блоків розтягнуті, щоб зайняти весь існуючий простір.

СSS властивості flex-wrap та align-content повинні застосовуватися безпосередньо до flex-контейнера, а не до його дочірніх елементів.

Демо властивостей багаторядковості у flex

CSS правила для дочірніх елементів flex-контейнера (flex-блоків)

flex-basis – базовий розмір окремо взятого flex-блоку

Задає початковий розмір головної осі для flex-блоку до того, як до нього будуть застосовані перетворення, засновані на інших flex-факторах. Може бути заданий у будь-яких одиницях виміру довжини (px, em, %, …) або auto (за замовчуванням). Якщо заданий як auto – за основу беруться розміри блоку (width, height), які, своєю чергою, можуть залежати від контенту, якщо не зазначені явно.

flex-grow – “жадібність” окремо взятого flex-блоку

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

Приклад 1:

Якщо всі flex-блоки всередині flex-контейнера мають flex-grow:1, то вони будуть однакового розміру
Якщо один з них має flex-grow:2 , то він буде в 2 рази більшим, ніж усі інші

Приклад 2:

Якщо всі flex-блоки всередині flex-контейнера мають flex-grow:3, то вони будуть однакового розміру
Якщо один з них має flex-grow:12 , то він буде вчетверо більше, ніж усі інші

Абсолютне значення flex-grow не визначає точну ширину. Воно визначає його ступінь "жадібності" по відношенню до інших flex-блоків того ж рівня.

flex-shrink - фактор "стискання" окремо взятого flex-блоку

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

flex – короткий запис для властивостей flex-grow, flex-shrink та flex-basis

flex: none | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* тобто. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basis: 30em; ) /* це те саме, що... */ .my-flex-block( flex: 12 3 30em;

Демо для flex-grow, flex-shrink та flex-basis

align-self - вирівнювання окремо взятого flex-блоку по поперечній осі.

Уможливлює перевизначення властивості flex-контейнера align-items для окремого flex-блоку.

Доступні значення align-self (ті ж 5 варіантів, що й для align-items)

flex-start: flex-блок притиснутий до початку поперечної осі
flex-end: flex-блок притиснутий до кінця поперечної осі
center: flex-блок розташовуються в центрі поперечної осі
baseline: flex-блок вирівняний за baseline
stretch (значення за замовчуванням): flex-блок розтягнутий, щоб зайняти все доступне місце по поперечній осі, при цьому враховуються min-width / max-width якщо такі задані.

order – порядок проходження окремо взятого flex-блоку всередині flex-контейнера.

За замовчуванням всі блоки будуть йти один за одним у порядку, заданому в html. Однак цей порядок можна змінити за допомогою властивості order. Воно задається цілим числом і за умовчанням 0 .

Значення order не визначає абсолютну позицію елемента в послідовності. Воно визначає вагу позиції елемента.

HTML

item1

item2

item3

item4

item5

В даному випадку, блоки будуть слідувати один за одним уздовж головної осі в наступному порядку: item5, item1, item3, item4, item2

Демо для align-self та order

margin: auto по вертикалі. Мрії збуваються!

Flexbox можна любити хоча б за те, що звичне для всіх вирівнювання по горизонталі через margin:auto тут працює і для вертикалі!

My-flex-container ( display: flex; height: 300px; /* Або що завгодно */ ) .my-flex-block ( width: 100px; /* Або що завгодно */ height: 100px; /* Або що завгодно * / margin: auto; /* Магія!

Речі, які слід пам'ятати

Не слід використовувати flexbox там, де в цьому немає потреби.
Визначення регіонів і зміна порядку контенту у багатьох випадках корисно робити залежним від структури сторінки. Продумуйте це.
Розберіться у flexbox та знайте його основи. Так набагато легше досягти очікуваного результату.
Не забувайте про margin-и. Вони враховуються при встановленні вирівнювання по осях. Також важливо пам'ятати, що margin-и у flexbox не “колапсяться”, як це відбувається у звичайному потоці.
Значення float у flex-блоків не враховується та не має значення. Це, мабуть, якось можна використовувати для graceful degradation під час переходу на flexbox.
flexbox дуже добре підходить для верстки веб-компонентів та окремих частин веб-сторінок, але показав себе не з кращого боку при верстці базових макетів (розташування article, header, footer, navbar тощо). Це ще спірний момент, але ця стаття досить переконливо показує недоліки xanthir.com/blog/b4580

На закінчення

Я думаю, що flexbox, звичайно ж, не витіснить решту способів верстки, але, безумовно, найближчим часом займе гідну нішу при вирішенні величезної кількості завдань. І точно, пробувати працювати з ним потрібно вже зараз. Одна з таких статей буде присвячена конкретним прикладам роботи з flex-версткою. Підписуйтесь на новини;)

Зміст:

Flexbox- це новий спосіб розміщувати блоки на сторінці. Це технологія, створена саме для розкладки елементів, на відміну від float-ів. За допомогою Flexboxможна легко вирівнювати елементи по горизонталі та по вертикалі, змінювати напрямок та порядок відображення елементів, розтягувати блоки на всю висоту батька або прибивати їх до нижнього краю.

UPD від 02.02.2017:зробила зручну шпаргалку з флексбоксів, з живими демками та описами з жару: Flexbox cheatsheet.

У прикладах використовується лише новий синтаксис. На момент написання статті найправильніше вони відображаються в Chrome. У Firefox працюють частково, у Safari – взагалі не працюють.

Згідно з сайтом caniuse.com, Flexboxне підтримується 8 та 9-м IE та Opera Mini, а в інших браузерах підтримуються не всі властивості та/або потрібні префікси.

Це означає, що технологію не можна широко використовувати прямо зараз, але вже час познайомитися з нею ближче.

Спочатку треба знати, що flex-елементи розташовуються по осях. За замовчуванням елементи розташовуються по горизонталі - вздовж main axis- Головної осі.

Також слід мати на увазі, що при використанні Flexboxдля внутрішніх блоків не працюють float, clear і vertical-align, а також властивості, що задають колонки в тексті.

Приготуємо полігон для експериментів:

Один батьківський блок (жовтий) та 5 дочірніх.

Display: flex

І тепер батьківському елементу додаємо display: flex; . Внутрішні div-и вишиковуються в ряд (вздовж головної осі) колонками однакової висоти, незалежно від вмісту.

display: flex; робить все дочірні елементи гумовими - flex, а не інлайновими або блочними, як це було спочатку.

Якщо батьківський блок містить зображення або текст без обгорток, вони стають анонімними flex-елементами.

Властивість display для Flexboxможе приймати два значення:

flex – веде себе як блоковий елемент. При розрахунку ширини блоків пріоритет розкладки (при недостатній ширині блоків контент може вилазити за межі).

inline-flex – веде себе як інлайн-блоковий. Пріоритет вмісту (контент розчепірює блоки до необхідної ширини, щоб рядки, по можливості, помістилися).

Flex-direction

Напрямок розкладки блоків керується властивістю flex-direction.

Можливі значення:

row - рядок (значення за умовчанням); row-reverse - рядок з елементами у зворотному порядку; column - стовпчик; column-reverse - колонка з елементами у зворотному порядку.

row та row-reverse

column та column-reverse

Flex-wrap

В одному рядку може бути багато блоків. Переносяться вони чи ні визначає властивість flex-wrap.

Можливі значення:

nowrap - блоки не переносяться (значення за замовчуванням); wrap – блоки переносяться; wrap-reverse - блоки переносяться і розташовуються у зворотному порядку.

Для короткого запису властивостей flex-direction та flex-wrap існує властивість: flex-flow.

Можливі значення: можна задавати обидві властивості або лише якесь одне. Наприклад:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse:

Order

Для управління порядком блоків служить властивість order.

Можливі значення: числа. Щоб поставити блок найпершим, задайте йому order: -1:

Justify-content

Для вирівнювання елементів є кілька властивостей: justify-content, align-items і align-self.

justify-content і align-items застосовуються до батьківського контейнера, align-self - до дочірніх.

Justify-content відповідає за вирівнювання по головній осі.

Можливі значення justify-content:

flex-start – елементи вирівнюються від початку головної осі (значення за умовчанням); flex-end – елементи вирівнюються від кінця головної осі; center – елементи вирівнюються по центру головної осі; space-between – елементи вирівнюються по головній осі, розподіляючи вільне місце між собою; space-around – елементи вирівнюються по головній осі, розподіляючи вільне місце навколо себе.

flex-start та flex-end

space-between , space-around

Align-items

align-items відповідає за вирівнювання перпендикулярної осі.

Можливі значення align-items:

flex-start – елементи вирівнюються від початку перпендикулярної осі; flex-end – елементи вирівнюються від кінця перпендикулярної осі; center – елементи вирівнюються по центру; baseline – елементи вирівнюються по базовій лінії; stretch - елементи розтягуються, займаючи весь простір перпендикулярної осі (значення за умовчанням).

flex-start, flex-end

baseline, stretch

Align-self

align-self також відповідає за вирівнювання перпендикулярної осі, але задається окремим flex-елементам.

Можливі значення align-self:

auto - значення за промовчанням. Означає, що елемент використовує align-items батьківського елемента; flex-start – елемент вирівнюється від початку перпендикулярної осі; flex-end – елемент вирівнюється від кінця перпендикулярної осі; center – елемент вирівнюється по центру; baseline – елемент вирівнюється по базовій лінії; stretch – елемент розтягується, займаючи весь простір по висоті.

Align-content

Для управління вирівнюванням усередині багаторядкового flex-контейнера є властивість align-content.

Можливі значення:

flex-start – елементи вирівнюються від початку головної осі; flex-end – елементи вирівнюються від кінця головної осі; center – елементи вирівнюються по центру головної осі; space-between – елементи вирівнюються по головній осі, розподіляючи вільне місце між собою; space-around – елементи вирівнюються по головній осі, розподіляючи вільне місце навколо себе; stretch - елементи розтягуються, заповнюючи всю висоту (за замовчуванням).

flex-start, flex-end

center, stretch

space-between , space-around

Ps:Деякі штуки мені так і не вдалося побачити в дії, наприклад, рядок flex-flow: column wrap або повний запис того ж flex-direction: column; flex-wrap: wrap; .

Елементи стоять стовпчиком, але не переносяться:

Чи не спрацьовує wrap при flex-direction: column; , хоча в спеку це виглядає ось так:

Думаю, згодом запрацює.

UPD від 21.06.2014:все працює, якщо задати блоку висоту. За підказку дякую

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

Підтримка браузерами технології CSS Flexbox

Технологія Flexbox підтримується вже майже всіма браузерами, що використовуються на сьогодні (з використанням префіксів: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+ ).

Основи Flexbox (сітка)

В основу Flexbox покладено сітку. Вона складається лише з 2 елементів. Перший елемент – це flex-контейнер. Створення flex-контейнера здійснюється за допомогою додавання до необхідного HTML елемент CSS-властивості display зі значенням flex або flex-inline .

Після цього усі безпосередні дочірні елементи flex-контейнера(діти) автоматично стають flex-елементами(2 елемент flexbox сітки).

HTML розмітка:

Flex-container ( display: flex; /* flex || inline-flex */ ) Структура flexbox сітки

Flex-елементи за промовчанням займають всю висоту flex-контейнера.

Значення flex чи flex-inline визначає те, як flex-контейнербуде представлено на сторінці. Якщо його необхідно подати як блок, використовуйте значення flex . Якщо елемент необхідно уявити як малийВикористовуйте значення flex-inline . У цьому випадку він займатиме стільки місця на сторінці, скільки необхідно для відображення його елементів.

Напрямок будівництва flex-елементів

Вказівка напряму будівництва flex-елементів усередині flex-контейнера здійснюється за допомогою осей.

У flexbox виділяють 2 осі. Перша вісь називається Основнийабо головною(за замовчуванням спрямовано праворуч). Друга - поперечна(за умовчанням спрямована вниз).

Елементи у flex-контейнері розміщуються в одну лінію (за умовчанням) навіть тоді, коли їм не вистачає місця. Вишиковуються flex-елементи у flex-контейнері за напрямком основної осі.

Розташування елементів у контейнері за замовчуванням (flex-елементи, яким не вистачає місця у flex-контейнері, вилазять за його межі)

У CSS Flexbox дозволити перенесення flex-елементів на нові лінії (якщо їм не вистачає місця в поточній лінії) здійснюється за допомогою установки flex-контейнеру CSS властивості flex-wrap зі значенням wrap або wrap-reverse.

Flex-wrap: wrap; /* nowrap (в одну лінію - за замовчуванням) wrap (дозволити перенесення flex-елементів на нові лінії) wrap-reverse (здійснювати перенесення flex-елементів у зворотному порядку) */

Значення wrap та wrap-reverse CSS-властивості flex-wrap визначають напрямок поперечної осі.

Установка напряму головної осі flexbox здійснюється за допомогою CSS-властивості flex-direction.

Flex-direction: row; /* row (вправо) - за замовчуванням row-reverse (ліворуч) column (вниз) column-reverse (вгору) */

За допомогою цієї властивості можна зробити так, щоб flex-елементи розташовувалися не горизонтально (рядками), а вертикально (колонками).

Властивості flex-direction та flex-wrap можна вказати за допомогою універсальної CSS властивості flex-flow:

Flex-flow: row nowrap; /* 1 значення - flex-direction, 2 значення - flex-wrap */

Вирівнювання flex-елементів

У Flexbox вирівнювання елементів усередині контейнера здійснюється за двома напрямками (осями).

Вирівнювання flex-елементів у напрямку головної осі

Вирівнювання елементів вздовж основної осі здійснюється за допомогою CSS властивості justify-content:

Justify-content: flex-start; /* flex-start (flex-елементи вирівнюються щодо початку осі) – за умовчанням flex-end (flex-елементи вирівнюються щодо кінця осі) center (по центру flex-контейнера) space-between (рівномірно, тобто з однаковою відстанню) між flex-елементами) space-around (рівномірно, але з додаванням половини простору перед першим flex-елементом та після останнього) */ Варіанти вирівнювання flex-елементів уздовж головної осі

Вирівнювання flex-елементів уздовж поперечної осі

Вирівнювання flex-елементів у flex-контейнері за напрямом поперечної осі здійснюється за допомогою CSS-властивості align-items:

Align-items: stretch; /* stretch (розтягуються по всій довжині поперечної осі) – за замовчуванням flex-start (щодо початку поперечної осі) flex-end (щодо кінця поперечної осі) baseline (щодо базової лінії) center (по центру) */ Варіанти вирівнювання flex-елементів вздовж поперечної осі

Вирівнювання ліній flex-контейнера

CSS Flexbox дозволяє вирівнювати не тільки самі flex-елементи, а й лінії, на яких вони розташовані.

Align-content: stretch /* stretch (розтягуються по всій довжині поперечної осі) – за умовчанням flex-start (щодо початку поперечної осі) flex-end (щодо кінця поперечної осі) center (по центру) space-between (рівномірно, т.к. е. з однаковою відстанню між лініями) space-around (рівномірно, але з додаванням половини простору перед першою лінією та після останньої) */ Варіанти вирівнювання ліній flex-контейнера

Властивість align-content має сенс використовувати лише тоді, коли flex-елементи у flex-контейнері розміщуються на кількох лініях. Щоб це сталося, необхідно, по-перше, щоб ширина всіх flex-елементів була більшою за ширину flex-контейнера, а по-друге flex-контейнер повинен мати як CSS-властивості flex-wrap значення wrap або wrap-reverse .

CSS-властивість align-self

Властивість align-self на відміну від попередніх (justify-content, align-items і align-content) призначена для flex-елементів. Воно дозволяє змінити вирівнювання flex-елементавздовж напрямку поперечної осі. Властивість align-self може набувати таких же значень як align-items .

Align-items: stretch; /* auto (за замовчуванням) || stretch || flex-start | flex-end | baseline || центр */

Flex-container ( display: flex; width: 300px; height: 150px; align-items: center; padding: 10px; background-color: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3,. background: #fe4; .flex-container_element-2 ( align-self: flex-end; background: pink; ) .flex-container_element-3 ( align-self: stretch; background: lime; ) ( align-self: auto; background: cyan; ) Як працює CSS властивість align-self

Зміна порядку проходження flex-елементів

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

Order: 0; /* 0 (за замовчуванням) ціле позитивне чи негативне число */

Наприклад:

...

CSS:. ( order: 1; ) /* розташуємо 4 flex-елемент до 1 */ .flex-container_element-4 ( order: -1; ) Як працює CSS властивість order

Управління шириною flex-елемента

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

CSS-властивість flex-basis

Ця властивість призначена для встановлення початкової ширини flex-елементу. Задавати значення ширини можна за допомогою різних одиниць виміру, таких як px, %, em та ін. За умовчанням дана властивість має значення auto (у цьому випадку ширина елемента буде розраховуватися автоматично на основі його вмісту).

Кінцева ширина flex-елемента визначатиметьсязалежно від значень CSS-властивостей flex-grow та flex-shrink, які встановлені не тільки для цього елемента, але й для інших flex-елементів цього flex-контейнера.

CSS-властивість flex-grow

Ця властивість визначає, чи може початкова ширина flex-елемента збільшуватись (рости). Збільшення ширини flex-елемента здійснюється за рахунок вільного простору лінії. Як значення CSS-властивості flex-grow вказується ціле число. Саме це значення і визначає (якщо воно більше або рівне 1) яку частину вільного простору flex-елемент забере собі.

Наприклад:

...

CSS: .flex-container ( display: flex; width: 600px; ) .flex-container_element-1 ( flex-basis: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-basis: 40% ; flex-grow: 4; ) Як працює CSS властивість flex-grow

У цьому прикладі, якщо flex-елементи розташовані на одній лінії і в ній є вільний простір (600×(1-0,8)=120px):

до ширини элемента.flex-container_element-1 додасться 1/5 частина цього простору (120×1/5=24px);
до ширини елемента.flex-container_element-2 додасться 4/5 частини цього простору (120×4/5=96px).

Іншими словами, CSS властивість flex-grow дозволяє не просто вказати, що ширина flex-елемента може зрости, а й задати, наскільки ця величина може зрости по відношенню до інших елементів.

За промовчанням CSS властивість flex-grow має значення 0. Це означає, що flex-елемент не може зростати (збільшувати свою ширину).

CSS-властивість flex-shrink

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

Наприклад:

...

CSS: .flex-container ( display: flex; width: 500px; ) .flex-container_element-1 ( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2 ( flex-basis: 300px; -shrink: 3; ) Як працює CSS властивість flex-shrink

Ширина flex-контейнера 500px. Для відображення flex-елементів потрібно 600px. У результаті не вистачає 100px. У цьому прикладі можуть зменшуватися 2 flex-елементи (.flex-container_element-1 і.flex-container_element-2). Ширина першого flex-елемента.flex-container_element-1 в даному випадку складе 300 - 1/4 * 100 = 275px. Ширина другого flex-елемента.flex-container_element-2 в даному випадку складе 300 - 3/4 * 100 = 225px.

Значення за замовчуванням:

Flex-shrink: 1;

Якщо вам потрібно заборонити зменшення ширини flex-елементу, то ролі значення властивості flex-shrink необхідно вказати число 0.

CSS-властивість flex

Для зручної установки flex-grow, flex-shrink та flex-basis можна використовувати CSS властивість flex.

Значення за замовчуванням:

Flex: 0 1 auto; /* 0 - flex-grow (1 значення) 1 - flex-shrink (2 значення) auto - flex-basis (3 значення) */

Верстка макету сторінки на CSS Flexbox

У цьому розділі створимо простий адаптивний макет Flexbox.

Структура макета складатиметься з 3 секцій:

header (для виведення заголовка та основного меню);
main (для відображення основної частини);
footer (для футера).

Основну частину (main) у свою чергу розділимо ще на 2 розділи (їхнє позиціонування будемо здійснювати за допомогою CSS Flexbox). На великих екранах (>=992px) ці розділи побудуємо горизонтально, але в інших - вертикально (<992px).

[Шапка сторінки...]

[Основна частина...]

CSS: /* контейнер (встановлює ширину блоку в залежності від ширини viewport) */ .container ( position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; ) @ media (min-width: 576px) ( .container ( width: 540px; max-width: 100%; ) ) @media (min-width: 768px) ( .container ( width: 720px; max-width: 100%) ) @media (min-width: 992px) ( .container ( width: 960px; max-width: 100%; ) ) @media (min-width: 1200px) ( .container ( width: 1140px; max-width: ; ) ) /* flex-контейнер */ .row-flex ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; - ms-flex-wrap: wrap; flex-wrap: margin-right: -15px; %; min-height: 1px; padding-right: padding-left: 15px; -webkit-flex: 0 0 100%; -ms-flex: 00 100%; flex: 00 100%; max-width: 100%; ) /* ширина блоків article і aside для великих екранів */ @media (min-width: 992px) ( /* 2/3 від ширини контейнера */ .main_article ( -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 66.666667%; 0 66.666667%; 0; -webkit-flex: 0 33.333333%; -ms-flex: 0 0 33.333333%;

Для підтримки макета більшістю браузерів додамо в CSS необхідні префікси та max-width.

Для «перетворення» блоку на flex-контейнер будемо використовувати клас row-flex. Установку ширини кожному flex-елементу (main_article і main_aside) усередині flex-контейнера будемо здійснювати за допомогою CSS-властивості flex.

Як приклад розмітимо за допомогою Flexbox ще блок «Футер» та секцію розділу main-article «Ціканько на сайті».

Секцію «Футер» розділимо на 4 рівні частини (мінімальна ширина однієї частини – 200px), а «Цікаве на сайті» на 3 частини (мінімальна ширина однієї частини – 300px).

[Шапка сторінки...]

[Основна частина...]

[Ще 1...]

[Ще 2...]

[Ще 3...]

Додатковий CSS:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-positive: 1; flex-grow: 1;

Модуль Flexbox-лейауту(flexible box - «гнучкий блок», на даний момент W3C Candidate Recommendation) ставить завдання запропонувати ефективніший спосіб верстки, вирівнювання та розподілу вільного місця між елементами в контейнері, навіть коли їх розмір невідомий та/або динамічний (звідси слово «гнучкий») .

Головна задумка flex-верстки у наділенні контейнера здатністю змінювати ширину/висоти (і порядок) своїх елементів для найкращого заповнення простору (у більшості випадків – для підтримки всіх видів дисплеїв та розмірів екранів). Flex-контейнер розтягує елементи для заповнення вільного місця або стискає їх, щоб запобігти виходу за кордон.

Найважливіше, flexbox-лейаут не залежить від напрямку на відміну від звичайних лейаутів (блоки, що розташовуються вертикально, та інлайн-елементи, що розташовуються горизонтально). У той час, як звичайний лейаут відмінно підходить для веб-сторінок, йому не вистачає гнучкості (ніякого каламбуру) для підтримки великих або складних програм (особливо коли справа доходить до зміни орієнтації екрану, зміни розміру, розтягування, стиснення тощо) .

Зауваження: Flexbox-лейаут найкраще підходить для складових частин програми та дрібномасштабних лейаутів, у той час як Grid-лейаут більше використовується для лейаутів великого масштабу.

Основи

Т.к. flexbox - це цілий модуль, а не просто одинична властивість, він поєднує у собі безліч властивостей. Деякі з них повинні застосовуватися до контейнера (батьківського елемента, так званого flex-контейнеру), у той час як інші властивості застосовуються до дочірніх елементів, або flex-елементів.

Якщо звичайний лейаут ґрунтується на напрямках потоків блокових та інлайн-елементів, то flex-лейаут ґрунтується на «напрямках flex-потоку». Ознайомтеся з цією схемою зі специфікації, яка пояснює основну ідею flex-лейаутів.

В основному елементи розподілятимуться або вздовж головної осі(від main-startдо main-end), або вздовж поперечної осі(від cross-startдо cross-end).

main-axis- головна вісь, вздовж якої розташовуються flex-елементи. Зверніть увагу, вона необов'язково має бути горизонтальною, все залежить від якості flex-direction (див. нижче).
main-start | main-end- flex-елементи розміщуються у контейнері від позиції main-start до позиції main-end.
main size- Ширина або висота flex-елемента в залежності від обраної основної величини. Основна величина може бути або завширшки, або заввишки елемента.
cross axis- Поперечна вісь, перпендикулярна до головної. Її напрямок залежить від напрямку головної осі.
cross-start | cross-end- flex-рядки заповнюються елементами та розміщуються в контейнері від позиції cross-start і до позиції cross-end.
cross size- Ширина або висота flex-елемента в залежності від обраної розмірності дорівнює цій величині. Ця властивість збігається з width або height елемента, залежно від обраної розмірності.

Властивості

display: flex | inline-flex;

Застосовується до:

Визначає flex-контейнер (інлайновий чи блоковий залежно від обраного значення), підключає flex-контекст всім його безпосередніх нащадків.

display : інші ціни | flex | inline-flex;

Майте на увазі:

CSS-стовпці columns не працюють з flex-контейнером
float , clear та vertical-align не працюють з flex-елементами