Flexbox у CSS

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

Якщо говорити коротко про документацію флексів, то верстка з Flexbox дає нам прості розв’язування колись непростих завдань. Наприклад, коли потрібно вирівняти елемент по вертикалі, або притиснути підвал до низу екрана, або просто вставити кілька блоків в один ряд, так щоб вони займали весь простір. Подібні завдання вирішуються без flex. Але як правило, ці рішення більше схожі на «милиці», і це ще більше ускладнюється, коли потрібно згортати адаптивний під мобільні пристрої макет. Тоді як із 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 властивості 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 тільки для протилежної осі.

Примітка: Працює лише коли висота контейнера фіксована (вище ніж ряди всередині нього).

Тобто. якщо 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 – елементи вирівнюються по базовій лінії тексту

column-gap:

gap:

Задає розмір інтервалу між елементами контейнера. Відповідно:

• column-gap:– Розсовує тільки колонки.
• gap:– Розсовує і колонки і ряди.

Розміри можна вказати в абсолютних чи відносних величинах: px, em, ...або %.

Підтримка gap{percent} (у column-gapпідтримка така сама ):

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

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 , то він буде вчетверо більше, ніж усі інші

Як це працює? Припустимо, що контейнер має ширину 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

• stretch – елемент розтягуються заповнюючи рядок повністю
• flex-start – елемент притискаються до початку рядка
• flex-end – елемент притискаються до кінця рядка
• center – елемент вирівнюються по центру рядка

• baseline – елемент вирівнюються по базовій лінії тексту

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.

• При використанні CSS властивості flexтри значення: flex-grow / flex-shrink / flex-basis можна скомбінувати і записати коротко – flex:0 0 50%. Тоді як при використанні 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

Підтримка браузерами – 99%

Повної підтримки очевидно немає, але всі сучасні браузери підтримують flexbox конструкції. Для деяких досі потрібно вказувати префікси.

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

/* Контейнер */
.flex {

	display:-ms-flexbox;
	display:flex;

	display:-ms-inline-flexbox;
	display: inline-flex;

	-ms-flex-direction:column;
	flex-direction:column;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-flow:column wrap;
	flex-flow:column wrap;

	-ms-flex-pack:justify;
	justify-content:space-between;

	-ms-flex-line-pack:distribute;
	align-content:space-around;
}

/* Елементи */
.flex-item {

	-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;

	-ms-flex-order:2;
	order:2;

}

Відео

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

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

• flexboxfroggy.com – гра навчальна flexbox.

• Flexplorer – наочний конструктор flex коду.

• Шпаргалка Flexbox

–

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

• https://habrahabr.ru/post/242545/
• http://html5.by/blog/flexbox/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://www.w3.org/TR/css-flexbox-1/

–