1. Базові знання
2. CSS властивості Flexbox
3. для контейнера
4. Для елементів контейнера
5. нотатки
6. Приклади Flex верстки
7. # 1 Простий приклад з вирівнюванням по вертикалі і горизонталі
8. # 1.2 Поділ (розрив) між елементами флекс блоку
9. # 2 Адаптивне меню на flex
10. # 3 Адаптивні 3 колонки
11. # 4 Адаптивні блоки на flex
12. # 5 Галерея на flex і transition
13. # 6 Флекс у флекс (просто приклад)
14. ще приклади
15. Підтримка браузерами - 98.3%
16. Відео
17. Корисні посилання по Flex

Стаття-шпаргалка по FlexBox. Порівняно нова модель верстки відома як Flexbox, стає все популярнішим. В першу чергу за рахунок зручного використання при створенні каркасів і верстки окремих елементів HTML сторінки. У другу, за рахунок абсолютно нових можливостей. У цій статті я спробую розібратися у всіх тонкощах Flexbox і доступно поділитися знаннями з вами.

Якщо говорити коротко, то верстка з Flexbox дає нам прості рішення колись непростих завдань. Наприклад, коли потрібно вирівняти елемент по вертикалі, або притиснути підвал до низу екрану, або просто вставити кілька блоків в один ряд, так щоб вони займали всі вільно простір. Подібні завдання вирішуються і без flex. Але як правило, ці рішення більше схожі на «милиці» - прийоми використовувати css не за призначенням. Тоді як з flexbox такі завдання вирішуються саме так, як задумує flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетів з гнучкими блоками), коротко flexbox, створена, щоб прибрати недоліки при створенні самих різних HTML конструкцій, в тому числі адаптованих під різну ширину і висоту, і зробити верстку логічною і простий. А логічний підхід, як правило працює в несподіваних місцях, там де результат не перевірявся - логіка наше все!

Flexbox дозволяє елегантно контролювати найрізноманітніші параметри елементів всередині контейнера: напрямок, порядок, ширину, висоту, вирівнювання вздовж і поперек, розподіл вільного місця, розтягнення і стиснення елементів.

Базові знання

FlexBox складається з Контейнери та його Дочірніх елементів (items) (гнучких елементів).

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

• Початок і кінець головної осі - елементи розташовуються від початку і до кінця контейнера.

• Поперечна вісь - напрямок руху елементів, коли вони не вміщаються в контейнер у напрямку головної осі. Поперечна вісь завжди перпендикулярна (⊥) головною.

• Початок і кінець поперечної осі - по поперечної осі заповнюються ряди від початку і до кінця контейнера. У кожному такому ряду розташовуються елементи (читайте нижче).

• Розмір (головний і поперечний) - базова величина по якій вираховується ширина або висота внутрішніх елементів, якщо розмір зазначений не точно (вказано в процентах або не вказано взагалі, а елемент повинен розтягнутися або стиснутися).

Для включення flexbox, будь-якого HTML елементу досить привласнити css властивість display: flex; або display: inline-flex ;.

<Style> .flex {display: flex; } </ Style> <div class = "flex"> <div class = "item"> 1 </ div> <div class = "item"> 2 </ div> </ div>

Після включення flex властивості, всередині контейнера створюються дві осі: головна і поперечна (перпендикулярна (⊥), крос вісь). Всі вкладені елементи (першого рівня) шикуються по головній осі. За замовчуванням головна вісь горизонтальна і має напрямок зліва направо (→), а крос вісь відповідно вертикальна і спрямована зверху вниз (↓).

Головну і крос осі можна поміняти місцями, тоді елементи будуть розташовуватися зверху вниз (↓) і коли перестануть вміщатися в висоту то будуть рухатися зліва направо (→) - тобто осі просто помінялися місцями. При цьому початок і кінець розташування елементів не змінюється - змінюються тільки напрямки (осі)! Саме тому потрібно уявляти собі осі всередині контейнера. Однак не потрібно думати, що є якісь там «фізичні» осі і вони на щось впливають. Ось тут - це тільки лише напрямок руху елементів всередині контейнера. Наприклад, якщо ми вказали вирівнювання елементів по центру основної осі і потім змінили напрям цієї основної осі, то зміниться і вирівнювання: елементи були в середині по горизонталі, а стали в середині по вертикалі ... Див. Приклад.

Ще однією важливою особливістю Флекс-бокс є наявність рядів в поперечному напрямку. Щоб зрозуміти про що мова, давайте уявимо що є головна горизонтальна вісь, багато елементів і вони не «лізуть» в контейнер, тому переходять на інший ряд. Тобто контейнер виглядає так: контейнер, всередині нього два ряди, в кожному ряду по кілька елементів. Представили? А тепер запам'ятайте, що вирівнювати по вертикалі ми можемо не тільки елементи, але і ряди! Як це працює добре видно в прикладі до властивості align-content . А ось так це виглядає схематично:

CSS властивості, які можуть впливати на модель побудови макета: float, clear, vertical-align, columns не працюють у flex конструкції. Тут використовується інша модель побудови макета і ці css властивості просто ігноруються.

меню

CSS властивості Flexbox

Flexbox містить різні css правила для управління всією flex конструкцією. Одні потрібно застосовувати до основного контейнера, а інші до елементів цього контейнера.

для контейнера

display:

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

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

flex і inline-flex відрізняються тим що по-різному взаємодіють з оточуючими елементами, подібно display: block і display: inline-block.

меню

flex-direction:

Змінює напрямок головної осі контейнера. Поперечна вісь змінюється відповідно.

• row (default) - напрям елементів зліва направо (→)
• column - напрямок елементів зверху вниз (↓)
• row-reverse - напрямок елементів справа наліво (←)
• column-reverse - напрямок елементів знизу вгору (↑)

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

меню

flex-wrap:

Управляє перенесенням непомещающіхся в контейнер елементів.

• nowrap (default) - вкладені елементи розташовуються в один ряд (при direction = row) або в одну колонку (при direction = column) незалежно від того поміщаються вони в контейнер чи ні.
• wrap - включає перенесення елементів на наступний ряд, якщо вони не поміщаються в контейнер. Так включається рух елементів по поперечної осі.
• wrap-reverse - теж що wrap тільки перенесення буде не вниз, а вгору (в зворотному напрямку).

flex-flow: direction wrap

Об'єднує обидва властивості flex-direction і flex-wrap. Вони часто використовуються разом, тому щоб писати менше коду було створено властивість flex-flow.

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

/ * Тільки flex-direction * / flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; / * Тільки flex-wrap * / flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; / * Відразу обидва значення: flex-direction і flex-wrap * / flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

Вирівнює елементи по основній осі: якщо direction = row, то по горизонталі, а якщо direction = column, то по вертикалі.

• flex-start (default) - елементи йтимуть з початку (в кінці може залишитися місце).
• flex-end - елементи вирівнюються по кінця (місце залишиться на початку)
• center - по центру (місце залишиться зліва і права)
• space-between - крайні елементи притискаються до країв (місце між елементами розподіляється рівномірно)
• space-around - вільний простір рівномірно розподіляється між елементами (крайні елементи не притискаються до країв). Простір між краєм контейнера і крайніми елементами буде в два рази менше ніж простір між елементами в середині ряду.
• space-evenly - теж що space-around, тільки відстань у крайніх елементів до країв контейнера таке ж як і між елементами.

align-content:

Вирівнює ряди, в яких знаходяться елементи по поперечної осі. Те ж що justify-content тільки для протилежної осі.

Замітка: Працює коли є як мінімум 2 ряди, тобто при наявності тільки 1 ряду нічого не станеться.

Тобто якщо flex-direction: row, то це властивість буде вирівнювати невидимі ряди по вертикалі |. Тут важливо зауважити, що висота блоку повинна бути задана жорстко і повинна бути більше висоти рядів інакше самі ряди будуть розтягувати контейнер і будь-яке їх вирівнювання втрачає сенс, тому що між ними немає вільного місця ... А ось коли flex-direction: column, то ряди рухається по горизонталі → і ширина контейнера майже завжди більше ширини рядів і вирівнювання рядів відразу набуває сенсу ...

Це властивість мало де потрібно і замість нього частіше використовується align-items (див.нижче).

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

align-items:

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

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

Для елементів контейнера

flex-grow:

Задає коефіцієнт збільшення елемента при наявності вільного місця в контейнері. За замовчуванням flex-grow: 0 тобто ніякий з елементів не повинен збільшуватися і заповнювати вільне місце в контейнері.

За замовчуванням flex-grow: 0

приклади:

• Якщо всіх елементів вказати flex-grow: 1, то всі вони розтягнутися однаково і заповнювати весь вільний простір в контейнері.
• Якщо одному з елементів вказати flex-grow: 1, то він заповнить весь вільний місце в контейнері і вирівнювання через justify-content працювати вже не будуть: вільного місця немає вирівнювати нічого ...
• При flex-grow: 1. Якщо один з них має flex-grow: 2, то він буде в 2 рази більше, ніж всі інші
• Якщо все flex-блоки всередині flex-контейнера мають flex-grow: 3, то вони будуть однакового розміру
• При flex-grow: 3. Якщо один з них має flex-grow: 12, то він буде в 4 рази більше, ніж всі інші

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

Замітка: в значенні можна вказувати дробові числа, наприклад: 0.5 - flex-grow: 0.5

flex-shrink:

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

За замовчуванням flex-shrink: 1

Припустимо, що контейнер має ширину 600px і містить два елементи, кожен з яких має ширину 300px - flex-basis: 300px ;. Тобто два елементи повністю заповнюють контейнер. Першому елементу вкажемо flex-shrink: 2 ;, а другого flex-shrink: 1 ;. Тепер зменшимо ширину контейнера на 300px, тобто елементи повинні стиснутися на 300px щоб знаходиться всередині контейнера. Стискатися вони будуть в співвідношенні 2: 1, тобто перший блок стиснеться на 200px, а другий на 100px і нові розміри елементів стануть 100px і 200px.

Замітка: в значенні можна вказувати дробові числа, наприклад: 0.5 - flex-shrink: 0.5

меню

flex-basis:

Встановлює базову ширину елемента - ширину до того як будуть вирахувані інші умови впливають на ширину елемента. Значення можна вказати в px, em, rem,%, vw, vh і т.д. Підсумкова ширина буде залежати від базової ширини і значень flex-grow, flex-shrink і контенту всередині блоку. При auto елемент отримує базову ширину щодо контенту всередині нього.

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

Іноді краще встановити ширину елемента жорстко через звичне властивість width. Наприклад, width: 50%; буде означати, що елемент всередині контейнера буде рівно 50%, однак при цьому все також будуть працювати властивості flex-grow і flex-shrink. Таке може бути потрібно, коли елемент розтягується контентом всередині нього, більше зазначеного у flex-basis. приклад дивіться в нотатках .

flex-basis буде «жорстким», якщо обнулити розтягування і стиснення: flex-basis: 200px; flex-grow: 0; flex-shrink: 0 ;. Все це можна записати так flex: 0 0 200px ;.

меню

flex: {grow shrink basis}

Коротка запис трьох властивостей: flex-grow flex-shrink flex-basis.

За замовчуванням: flex: 0 1 auto

Однак можна вказати і одне, і два значення:

flex: none; / * 0 0 auto * / / * число * / flex: 2; / * Flex-grow (flex-basis переходить в 0) * / / * Не число * / flex: 10em; / * Flex-basis: 10em * / flex: 30px; / * Flex-basis: 30px * / flex: auto; / * Flex-basis: auto * / flex: content; / * Flex-basis: content * / flex: 1 30px; / * Flex-grow і flex-basis * / flex: 2 + 2; / * Flex-grow і flex-shrink (flex-basis переходить в 0) * / flex: 2 + 2 10%; / * Flex-grow і flex-shrink і flex-basis * / align-self:

Дозволяє змінити властивість align-items, тільки для окремого елемента.

За замовчуванням: від align-items контейнера

меню

order:

Дозволяє змінювати порядок (позицію, положення) елемента в загальному ряду.

За замовчуванням: order: 0

За замовчуванням елементи мають order: 0 і ставляться в порядку їх появи в HTML коді і напрямки ряду. Але якщо змінити значення властивості order, то елементи будуть вибудовуватися в порядку значень: -1 0 1 2 3 .... Наприклад якщо одному з елементів вказати order: 1, то спочатку будуть йти всі нульові, а потім елемент з 1.

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

меню

нотатки

Чим відрізняється flex-basis від width?

Нижче важливі відмінності між flex-basis і width / height:

• flex-basis працює тільки для головної осі. Це означає що при flex-direction: row flex-basis контролює ширину (width), а при flex-direction: column контролює висоту (height). дивіться приклад .

• flex-basis застосовується тільки до flex елементам. А значить якщо відключити flex у контейнера це властивість не матиме ефекту.

• Абсолютні елементи контейнера не беруть участь у flex конструкції ... А значить, flex-basis не впливає на елементи flex контейнера, якщо вони абсолютні position: absolute. Їм потрібно буде вказати width / height.

• При використанні властивості flex 3 значення (flex-grow / flex-shrink / flex-basis) можна скомбінувати і записати коротко, а для width grow або shrink потрібно писати окремо. Наприклад: flex: 0 0 50% == width: 50%; flex-shrink: 0 ;. Іноді це просто незручно.

По можливості все ж віддавайте перевагу flex-basis. Використовуйте width тільки коли не підходить flex-basis.

Відмінність flex-basis від width - баг або фіча?

Контент всередині flex елемента розпирає його і не може вийти за його межі. Однак якщо встановити ширину через width або max-width, а не flex-basis, то елемент всередині flex контейнера зуміє вийти за межі цього контейнера (іноді потрібно саме така поведінка). приклад:

меню

Приклади Flex верстки

У прикладах ніде не використовуються префікси для кросбраузерності. Зробив я так для зручного читання css. Тому приклади дивіться в останніх версіях Chrome або Firefox.

# 1 Простий приклад з вирівнюванням по вертикалі і горизонталі

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

<Div class = "parent"> <span class = "child"> Текст по середині </ span> </ div> <style> .parent {display: flex; } .Child {margin: auto; } </ Style>

Або так, без блоку всередині:

<Div class = "center-text"> Текст по середині </ div> <style> .center-text {display: flex; justify-content: center; align-items: center; } </ Style>

# 1.2 Поділ (розрив) між елементами флекс блоку

Щоб розташувати елементи контейнера по краях і довільно вибрати елемент після якого буде розрив, потрібно використовувати властивість margin-left: auto або margin-right: auto.

# 2 Адаптивне меню на flex

Зробимо меню в самому верху сторінки. На широкому екрані воно повинно бути справа. На середньому вирівнюватися по середині. А на маленькому кожен елемент повинен бути на новому рядку.

<Div class = "nav"> <a href="#"> Головна </a> <a href="#"> Про нас </a> <a href="#"> Продукти </a> <a href = "#"> Контакти </a> </ div> <style> .nav {display: flex; justify-content: flex-end; / * Розмістимо справа * / background: # 6e9cc3; } .Nav a {color: #fff; padding: 15px 10px; text-decoration: none; text-align: center; } .Nav a: hover {background: # 5c8db7; } / * Менше 800px * / @media all and (max-width: 800px) {.nav {justify-content: space-around; } .Nav a {flex-grow: 1; / * Розтягуватися на всю ширину * /}} / * менше 500px * / @media all and (max-width: 500px) {.nav {flex-direction: column; }} </ Style>

Перейдіть в jsfiddle.net і змінюйте ширину секції «результат»

# 3 Адаптивні 3 колонки

Цей приклад показує як швидко і зручно зробити 3 колонки, які при звуженні будуть перетворюватися в 2 і потім в 1.

Зверніть увагу, що зробити це можна без використання media правил, все на flex.

<Div class = "flex"> <div class = "item"> 1 </ div> <div class = "item"> 2 </ div> <div class = "item"> 3 </ div> <div class = "item"> 4 </ div> <div class = "item"> 5 </ div> <div class = "item"> 6 </ div> </ div> <style> .flex {display: flex; flex-wrap: wrap; max-width: 700px; / * Макс ширина * / margin: 0 auto; / * Вірівняємо по центру * /} .item {flex: 1 + 1 calc (33.33% - 30px); / * Віднімемо margin и скажемо розтягуватіся * / margin: 5px; box-sizing: border-box; / * Щоб Внутрішній відступ НЕ вплівав коли там буде текст ... * / min-width: 170px; / * Хв. ширина блоку, щоб переносити на Інший ряд * / padding: 50px 20px; font-size: 400%; text-align: center; background: # b5ced8; / * Для краси * /} </ style>

Перейдіть в jsfiddle.net і змінюйте ширину секції «результат»

# 4 Адаптивні блоки на flex

Припустимо нам потрібно вивести 3 блоку, один великий і два маленьких. При цьому потрібно щоб блоки підбудовувалися під маленькі екрани. робимо:

<Div class = "flex"> <div class = "mainitem"> 1 </ div> <div class = "sideitem"> <div class = "item"> 2 </ div> <div class = "item"> 3 </ div> </ div> </ div> <style> .flex {display: flex; max-width: 700px; / * Макс ширина блоку * / margin: 0 auto; / * Вирівнюємо блок по центру * / font-size: 400%; } .Mainitem, .item {flex-grow: 1; / * Розтягування елементів * / background: # b5ced8; display: flex; justify-content: center; align-items: center; / * Цифри по центру * /} .mainitem {min-height: 300px; / * Висота основного блоку * /} .sideitem {/ * flex: 0 0 150px; * / Flex-basis: 150px; / * Ширина 150 * / flex-shrink: 0; / * Прибираємо зменшення = 150 * / display: flex; flex-direction: column; } .Item {flex-basis: 50%; min-height: 150px; margin-left: 10px; } .Item: first-child {margin-bottom: 10px; } / * Менше 600px * / @media screen and (max-width: 600px) {.flex {flex-wrap: wrap; } / * Для перенесення * / .sideitem {flex-direction: row; flex-basis: 100%; } .Item {margin-left: 0; margin-top: 10px; } .Item: first-child {margin-bottom: 0; margin-right: 10px; }} / * Менше 450px * / @media screen and (max-width: 450px) {.sideitem {flex-wrap: wrap; } / * Дозволяємо перенесення * / .item {flex-basis: 100%; } / * На всю ширину * / .item: first-child {margin-right: 0; }} </ Style>

Перейдіть в jsfiddle.net і змінюйте ширину секції «результат»

# 5 Галерея на flex і transition

Цей приклад показує як швидко можна зробити симпатичний акордеон з картинками на flex. Зверніть увагу на властивість transition для flex.

<Div class = "flex"> <div class = "item img1"> </ div> <div class = "item img2"> </ div> <div class = "item img3"> </ div> <div class = "item img4"> </ div> <div class = "item img5"> </ div> </ div> <style> .flex {display: flex; overflow: hidden; / * Приховуємо тінь * /} .item {height: 300px; flex: 20%; / * = Flex-basis: 20%; * / Transition: flex 300ms ease; box-shadow: 0 0 19px 3px # 000; margin: 1px; / * Красивості тіні * /} .item: hover {flex: 0.1 0.1 400px; background-size: 100% 100%} .img1 {background: url ( 'http://lorempixel.com/400/300/cats/1') 0 0 no-repeat; } .Img2 {background: url ( 'http://lorempixel.com/400/300/cats/2') 0 0 no-repeat; } .Img3 {background: url ( 'http://lorempixel.com/400/300/cats/3') 0 0 no-repeat; } .Img4 {background: url ( 'http://lorempixel.com/400/300/cats/4') 0 0 no-repeat; } .Img5 {background: url ( 'http://lorempixel.com/400/300/cats/5') 0 0 no-repeat; } </ Style>

# 6 Флекс у флекс (просто приклад)

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

Для вирішення цього завдання, самі блоки розтягуються флексом і їм встановлена ​​максимально можлива ширина. Кожен внутрішній блок також є флекс конструкцією, з поверненою віссю flex-direction: column; і елемент в середині (де знаходиться текст) розтягується flex-grow: 1; щоб заповнити весь вільний простір, так досягається результат - текст починався з однієї лінії ...

ще приклади

дивіться тут alexriz.github.io

меню

Підтримка браузерами - 98.3%

Повної підтримки зрозуміло немає, проте всі сучасні браузери підтримують flexbox конструкції. Для деяких все ще потрібно вказувати префікси. Для реальної картини заглянемо в caniuse.com і бачимо, що без префіксів працюватимуть 96.3% використовуваних сьогодні браузерів, з префіксами 98.3%. Це відмінний показник для того щоб сміливо використовувати flexbox.

Щоб знати які префікси актуальні на сьогодні (червень. 2019), наведу приклад всіх flex правил з потрібними префіксами:

/ * Контейнер * / .flex {display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: distribute; align-content: space-around; } / * Елементи * / .flex-item {-webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 2; flex-shrink: 2; -ms-flex-preferred-size: 100px; flex-basis: 100px; -ms-flex 1 2 100px; flex 1 2 100px; -ms-flex-item-align: center; align-self: center; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }

Краще якщо властивості з префіксами йтимуть до оригінального властивості.
У цьому списку немає непотрібних на сьогодні (за caniuse) префіксів, але взагалі префіксів більше.

Chrome Safari Firefox Opera IE Android iOS 20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1 + (old) 3.2+ (old) 21+ (new) 6.1+ (new) 22+ ( new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)

• (New) - новий синтаксис: display: flex ;.
• (Tweener) - старий неофіційний синтаксис 2011 року: display: flexbox ;.
• (Old) - старий синтаксис 2009 року: display: box;

Відео

Ну і не забувайте про відео, там часом теж цікаво і зрозуміло. Ось парочка популярних:

Корисні посилання по Flex

-

Використав при написанні:

Статті до цього: CSS