Всички свойства на flexbox. Flexbox: Нов принцип на CSS оформление. Изработка на адаптивно оформление

Накратко, оформлението с Flexbox ни дава прости решения на някога трудни задачи. Например, когато трябва да подравните елемент вертикално или да натиснете долния колонтитул в долната част на екрана или просто да вмъкнете няколко блока в един ред, така че да заемат цялото свободно пространство. Подобни задачи се решават без флекс. Но като правило тези решения са по-скоро като "патерици" - трикове за използване на css за други цели. Докато с flexbox такива задачи се решават точно както си представя flex моделът.

Модулът CSS Flexible Box Layout (CSS модул за оформления с гъвкави блокове), flexbox накратко, е създаден, за да премахне недостатъците при създаване на голямо разнообразие от HTML структури, включително тези, адаптирани към различни ширини и височини, и да направи оформлението логично и просто . И логическият подход, като правило, работи на неочаквани места, където резултатът не е проверен - логиката е нашето всичко!

Flexbox ви позволява елегантно да управлявате голямо разнообразие от параметри за елементи в контейнер: посока, ред, ширина, височина, подравняване надлъжно и напречно, разпределение на свободното пространство, разтягане и свиване на елементи.

Основни познания

FlexBox се състои от контейнер и неговите дъщерни елементи (елементи) (гъвкави елементи).

За да активирате flexbox, всеки HTML елемент просто трябва да настрои свойството css на display:flex; или дисплей: inline-flex; .

След като активирате свойството flex, вътре в контейнера се създават две оси: главна и напречна (перпендикулярна (⊥), напречна ос). Всички вложени елементи (от първо ниво) са подравнени по главната ос. По подразбиране основната ос е хоризонтална и има посока отляво надясно (→), а напречната ос е съответно вертикална и насочена отгоре надолу (↓).

Основната и напречната ос могат да бъдат разменени, тогава елементите ще бъдат разположени отгоре надолу (↓) и когато вече не пасват на височина, ще се преместят отляво надясно (→) - т.е. осите просто са разменени. В този случай началото и краят на подреждането на елементите не се променят - променят се само посоките (осите)! Ето защо трябва да мислите за оси вътре в контейнер. Но не трябва да се мисли, че има някакви „физически” оси и те влияят на нещо. Оста тук е само посоката на движение на елементите вътре в контейнера. Например, ако посочихме подравняването на елементите към центъра на главната ос и след това променихме посоката на тази главна ос, тогава подравняването също ще се промени: елементите бяха в средата хоризонтално и станаха в средата вертикално. Вижте примера.

Друга важна характеристика на Flexbox е наличието на редове в напречна посока. За да разберем за какво говорим, нека си представим, че има главна хоризонтална ос, много елементи и те не се "изкачват" в контейнера, така че се преместват на друг ред. Тези. контейнерът изглежда така: контейнер, вътре в него има два реда, всеки ред има няколко елемента. Представено? А сега не забравяйте, че можем да подравняваме вертикално не само елементи, но и редове! Как работи се вижда ясно в примера за . А ето как изглежда схематично:

CSS свойства, които могат да повлияят на модела на оформление: float, clear, vertical-align, колони не работят във flex конструкции. Тук се използва различен модел на оформление и тези css свойства просто се игнорират.

CSS свойства на Flexbox

Flexbox съдържа различни css правила за управление на целия flex дизайн. Някои трябва да бъдат приложени към основния контейнер, а други към елементите на този контейнер.

За контейнер

Активира свойството flex за елемента. Самият елемент и елементите, вложени в него, попадат под това свойство: засегнати са само наследниците на първото ниво - те ще станат елементите на гъвкавия контейнер.

• flex- елементът се простира в цялата си ширина и разполага с цялото си пространство сред околните блокове. В началото и в края на блока има прекъсване на реда.
• inline-flex- елементът е обвит от други елементи. В същото време вътрешната му част е форматирана като блоков елемент, а самият елемент е форматиран като вграден елемент.

flex и inline-flex се различават по това, че взаимодействат по различен начин с околните елементи, подобно на display:block и display:inline-block.

Променя посоката на главната ос на контейнера. Напречната ос се променя съответно.

• ред (по подразбиране)- посока на елементите отляво надясно (→)
• колона- посока на елементите отгоре надолу (↓)
• ред обратен- посока на елементите от дясно на ляво (←)
• колона реверс- посока на елементите отдолу нагоре ()

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

• nowrap (по подразбиране)- вложените елементи се подреждат в един ред (с direction=ред) или в една колона (с direction=колона) независимо дали са поставени в контейнер или не.
• обвивам- включва прехвърляне на елементи на следващия ред, ако не се побират в контейнера. Това позволява движението на елементите по напречната ос.
• увийте обратно- същото като wrap само прехвърлянето няма да е надолу, а нагоре (в обратна посока).

Съчетава както свойствата на посоката на огъване, така и свойствата на огъване. Те често се използват заедно, така че свойството flex-flow е създадено, за да пише по-малко код.

flex-flow приема стойностите на тези две свойства, разделени с интервал. Или можете да посочите една стойност за всяко свойство.

/* само flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: колона; flex-flow: колона-реверс; /* само flex-wrap */ flex-flow: nowrap; flex-flow: обвивка; flex-flow: wrap-reverse; /* и двете стойности наведнъж: flex-direction и flex-wrap */ flex-flow: row nowrap; flex-flow: обвиване на колони; flex-flow: колона-реверс wrap-реверс; justify-content:

Подравнява елементите по главната ос: ако direction=ред, тогава хоризонтално и ако direction=column, тогава вертикално.

• гъвкав старт (по подразбиране)- елементите ще вървят от началото (може да има празно място в края).
• гъвкав край- елементите се подравняват в края (мястото ще остане в началото)
• център- в центъра (мястото ще остане отляво и отдясно)
• пространство между- крайните елементи се притискат към ръбовете (пространството между елементите се разпределя равномерно)
• пространство наоколо- свободното пространство е равномерно разпределено между елементите (екстремните елементи не са притиснати към краищата). Пространството между ръба на контейнера и най-външните елементи ще бъде половината от пространството между елементите в средата на реда.
• пространство-равномерно

Подравнява редове, съдържащи елементи по напречната ос. Същото като justify-content, но за противоположната ос.

Забележка: Работи, когато има поне 2 реда, т.е. ако има само 1 ред, нищо няма да се случи.

Тези. ако flex-direction: row , тогава това свойство ще подравни невидимите редове вертикално ¦ . Тук е важно да се отбележи, че височината на блока трябва да бъде твърдо зададена и трябва да бъде по-голяма от височината на редовете, в противен случай самите редове ще разтеглят контейнера и всяко тяхно подравняване губи смисъл, защото няма свободно пространство между тях... Но когато flex-direction: column , тогава редовете се движат хоризонтално → и ширината на контейнера почти винаги е по-голяма от ширината на редовете и подравняването на редовете веднага има смисъл...

• разтягане (по подразбиране)- редовете се разтягат до пълно запълване на реда
• гъвкав старт- редовете са групирани в горната част на контейнера (може да има място в края).
• гъвкав край- редовете са групирани в долната част на контейнера (мястото ще остане в началото)
• център- редовете са групирани в центъра на контейнера (мястото ще остане в краищата)
• пространство между- крайните редове се притискат към ръбовете (пространството между редовете е равномерно разпределено)
• пространство наоколо- свободното пространство е равномерно разпределено между редовете (крайните елементи не са притиснати към ръбовете). Пространството между ръба на контейнера и най-външните елементи ще бъде половината от пространството между елементите в средата на реда.
• пространство-равномерно- същото като space-around, само разстоянието на крайните елементи до ръбовете на контейнера е същото като между елементите.

Подравнява елементите по напречната ос в рамките на ред (невидим ред). Тези. самите редове се подравняват чрез align-content , а елементите вътре в тези редове (редове) чрез align-items и всичко това по напречната ос. Няма такова разделяне по главната ос, няма концепция за редове и елементите се подравняват с помощта на justify-content.

• разтягане (по подразбиране)- елементите се разтягат, за да запълнят изцяло линията
• гъвкав старт- елементите се притискат към началото на реда
• гъвкав край- елементите се притискат до края на реда
• център- елементите са подравнени в центъра на реда
• базова линия- елементите са подравнени спрямо основната линия на текста

За контейнерни елементи

Указва коефициента за увеличаване на елемента, когато има свободно място в контейнера. По подразбиране flex-grow: 0 т.е. никой от елементите не трябва да расте и да запълва свободното пространство в контейнера.

По подразбиране flex-grow: 0

• Ако посочите flex-grow:1 за всички елементи, тогава всички те се разтягат по един и същи начин и запълват цялото свободно пространство в контейнера.
• Ако посочите flex-grow:1 за един от елементите, тогава той ще запълни цялото свободно пространство в контейнера и подравняването чрез justify-content вече няма да работи: няма свободно място за подравняване...
• С flex-grow:1. Ако един от тях има flex-grow:2, тогава той ще бъде 2 пъти по-голям от всички останали
• Ако всички гъвкави кутии във гъвкав контейнер имат 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-grow и определя как елементът трябва да се свие, ако в контейнера не остане свободно място. Тези. свойството започва да работи, когато сумата от размерите на всички елементи е по-голяма от размера на контейнера.

Флекс-свиване по подразбиране: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

Задава основната ширина на елемента - ширината преди да бъдат изчислени други условия, които влияят на ширината на елемента. Стойността може да бъде посочена в px, em, rem, %, vw, vh и т.н. Крайната ширина ще зависи от основната ширина и стойностите на flex-grow, flex-shrink и съдържанието вътре в блока. С auto елементът получава основна ширина спрямо съдържанието вътре в него.

По подразбиране: автоматично

Понякога е по-добре да кодирате твърдо ширината на елемент, като използвате познатото свойство за ширина. Например ширина: 50%; ще означава, че елементът вътре в контейнера ще бъде точно 50%, но свойствата flex-grow и flex-shrink ще продължат да работят. Това може да е необходимо, когато елементът е разтегнат от съдържанието вътре в него, повече от определеното във flex-basis. Пример.

flex-basis ще бъде "твърд", ако разтягането и свиването са зададени на нула: flex-basis:200px; flex-grow:0; гъвкаво свиване:0; . Всичко това може да се запише като flex:0 0 200px; .

Съкратено три свойства: flex-grow flex-shrink flex-basis.

По подразбиране: flex: 0 1 auto

Можете обаче да посочите една или две стойности:

Flex: няма; /* 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: съдържание; /* flex-basis: съдържание */ 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 само за един елемент.

По подразбиране: от елементите за подравняване на контейнера

• опъвам, разтягам- елементът се разтяга, за да запълни изцяло линията
• гъвкав старт- елементът се притиска към началото на реда
• гъвкав край- елементът е притиснат до края на реда
• център- елементът е подравнен към центъра на линията

базова линия- елементът е подравнен спрямо основната линия на текста

Позволява ви да промените реда (позицията, позицията) на елемент в общия ред.

По подразбиране: ред: 0

По подразбиране елементите имат ред: 0 и се поставят в реда на тяхното появяване в HTML кода и посоката на реда. Но ако промените стойността на свойството ред, тогава елементите ще се подредят в реда на стойностите: -1 0 1 2 3 ... . Например, ако посочите ред: 1 за един от елементите, тогава първо ще бъдат всички нули, а след това елементът с 1.

Така че можете например да хвърлите първия елемент до края, без да променяте посоката на движение на останалите елементи или HTML кода.

Бележки

Как се различава flex-basis от width?

По-долу са важните разлики между гъвкава основа и ширина/височина:

flex-basis работи само за главната ос. Това означава, че с flex-direction:row flex-basis контролира ширината (width), а с flex-direction:column контролира височината (height). .

flex-basis се отнася само за гъвкави елементи. Това означава, че ако деактивирате flex на контейнера, това свойство няма да има ефект.

Абсолютните контейнерни елементи не участват във гъвкави конструкции... Това означава, че flex-basis не засяга контейнерните гъвкави елементи, ако те са абсолютна позиция:абсолютна. Те ще трябва да посочат ширина / височина.

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

Ако е възможно, предпочитайте flex-basis. Използвайте ширина само когато гъвкавата основа не пасва.

Разликата между flex-basis и width грешка ли е или функция?

Съдържанието вътре във flex елемент го разширява и не може да излезе извън него. Въпреки това, ако зададете ширината чрез width или max-width, а не flex-basis, тогава елементът вътре във flex контейнера ще може да излезе извън този контейнер (понякога това поведение е необходимо). Пример:

Примери за гъвкаво оформление

В примерите никъде не се използват префикси за съвместимост между различни браузъри. Направих това за лесно четене на css. Затова вижте най-новите версии на Chrome или Firefox за примери.

#1 Прост пример за вертикално и хоризонтално подравняване

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

Или така, без блока вътре:

#1.2 Разделяне (пролука) между гъвкавите блокови елементи

За да позиционирате елементите на контейнера по краищата и произволно да изберете елемента, след който ще има празнина, трябва да използвате свойството margin-left:auto или margin-right:auto.

#2 Отзивчиво меню на flex

Нека направим меню в горната част на страницата. На широк екран трябва да е отдясно. Средно подравнете в средата. А на малък всеки елемент трябва да е на нов ред.

#3 Отзивчиви 3 колони

Този пример показва как бързо и удобно да направите 3 колони, които при стесняване ще се превърнат в 2 и след това в 1.

Моля, обърнете внимание, че това може да се направи без използване на медийни правила, всичко е на flex.

Отидете на jsfiddle.net и променете ширината на секцията „резултат“.

#4 Отзивчиви блокове на flex

Да кажем, че трябва да покажем 3 блока, един голям и два малки. В същото време е необходимо блоковете да се адаптират към малки екрани. Ние правим:

Отидете на jsfiddle.net и променете ширината на секцията „резултат“.

#5 Галерия за гъвкавост и преход

Този пример показва колко бързо можете да направите красив акордеон с картинки върху flex. Забележете свойството за преход за flex.

#6 Flex to Flex (само пример)

Задачата е да се направи гъвкав блок. Така че началото на текста във всеки блок е на един и същи ред хоризонтално. Тези. тъй като ширината се стеснява, блоковете растат на височина. Имам нужда от снимката да е най-отгоре, бутонът да е винаги отдолу, а текстът в средата да започва на една хоризонтална линия...

За да се реши този проблем, самите блокове се разтягат чрез флекс и им се задава максималната възможна ширина. Всеки вътрешен блок също е гъвкава конструкция, като flex-direction:column е завъртян; а елементът в средата (където е текстът) се разтяга от flex-grow:1; за да запълни цялото свободно пространство, така че резултатът е постигнат - текстът започва с един ред ...

Още примери

Поддръжка на браузър - 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:обвиване на колони; flex-flow:обвиване на колони; -webkit-box-pack:оправяне; -ms-flex-pack:оправяне; обосноваване на съдържание:интервал между; -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), но като цяло има повече префикси.

• (нов) - нов синтаксис: дисплей: flex; .
• (tweener) - стар 2011 неофициален синтаксис: дисплей: flexbox; .
• (стар) - стар 2009 синтаксис: дисплей: кутия;

Видео

Е, не забравяйте за видеото, понякога също е интересно и разбираемо. Ето няколко популярни:

Полезни гъвкави връзки

flexboxfroggy.com - учебна игра за flexbox.

Flexplorer е визуален конструктор на гъвкав код.

За това колко лесно е да работите с Flexbox на примера на оформлението на шаблон за новинарски сайт.

Повярвайте ми, няма нужда да навлизате във всички подробности за работата с Flexbox, ако искате да започнете да го използвате точно сега. В този урок авторът ще ви запознае с някои от функциите на Flexbox и ще създаде „оформление за новини“, подобно на това, което може да сте виждали на уебсайта на The Guardian.

Причината, поради която авторът използва Flexbox, е поради многото възможности, които предоставя:
- лекота на създаване на адаптивни колони;
- създаване на колони с еднаква височина;
- възможност за изтласкване на съдържанието до дъното на контейнера.

Да тръгваме!

1. Започнете, като създадете две колони

От своя страна Flexbox опростява този процес с редица предимства като:

Писане на по-чист код: всичко, което трябва да направим, е да създадем контейнер с правило дисплей: гъвкав;
- гъвкавост: можем да преоразмеряваме, разтягаме и подравняваме колони, като променяме няколко реда от CSS;
- семантично маркиране;
- в допълнение, с използването на Flexbox не е необходимо да се отменя обвиването, за да се избегне непредвидимо поведение на оформлението.

Нека започнем, като създадем две колони, една, която ще заеме 2/3 от ширината на нашия контейнер, и една, която ще заеме 1/3 от него.

Контейнер колони;
- два дъщерни елемента колона, като едната е с допълнителен клас основна колона, който използваме по-късно, за да направим колоната по-широка.

Колони ( дисплей: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Тъй като основна колонаима гъвкава стойност, равна на 2 , тогава тази колона ще заема два пъти повече място от втората.

Нека добавим малко визуален дизайн и в резултат на това получаваме:

Кликнете, за да видите в действие

2. Направете всяка колона flexbox контейнер

И така, имаме нужда от статии за:

Подредени вертикално вътре в контейнерна колона;
- зае цялото налично пространство.

правило flex-direction: колонаопределен за контейнера, заедно с правилото гъвкавост: 1посочен за дъщерния елемент позволява на статията да запълни цялото свободно пространство вертикално, като същевременно запазва височината на първите две колони непроменена.

Кликнете, за да видите в действие

3. Изработка на контейнер от артикул

заглавие;
- параграф;
- информационен панел с името на автора и броя на коментарите;
- някакво адаптивно изображение.

Тук използваме Flexbox, за да изместим информационната лента в долната част на елемента. Ето вижте какъв резултат очакваме да получим.

А ето и самия код:

Нанесли сме и имота гъвкавост: 1към елемент статия-съдържание, като по този начин го разтягате до цялото свободно пространство и натискате информация за статиятадо дъното. Височината на колоната в този случай няма значение.

Кликнете, за да видите в действие

4. Добавяне на множество вложени колони

Вложена колона ( flex: 2; )
Сега тази колона ще бъде два пъти по-широка от втората.

Кликнете, за да видите в действие

5. Изработка на първи артикул с хоризонтално оформление

First-article (flex-direction: row;) .first-article .article-body (flex: 1;) .first-article .article-image (височина: 300px; ред: 2; padding-top: 0; ширина: 400px; )
Имот поръчкаиграе голяма роля в този случай, защото ви позволява да промените реда на HTML елементите, без да променяте HTML маркирането. В действителност, статия-изображениев кода идва преди елемента статия-тяло, но се държи така, сякаш е след него.

Кликнете, за да видите в действие

6. Изработка на адаптивно оформление

Едно от страхотните неща на Flexbox е, че можете просто да премахнете правилото дисплей: гъвкавв контейнера, за да го деактивирате напълно (Flexbox), докато останалите му свойства (като напр подравняване на елементиили flex) ще остане в експлоатация.

В резултат на това можем да активираме адаптивното оформление, като активираме Flexbox само когато е необходимо.

Така че ще премахнем дисплей: гъвкавот селектори .колонии .колона, вместо да ги "опакова" в медийна заявка:

@медиен екран и (мин. ширина: 800px) ( .columns, .column ( display: flex; ) )
Това е всичко! На екрани с малка резолюция всички статии ще бъдат разположени една над друга, а на екрани с резолюция над 800 пиксела - в две колони.

7. Добавяне на финални щрихи

@медиен екран и (мин. ширина: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; ред: 2; padding-top: 0; ширина: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Съдържанието на първата статия е подравнено хоризонтално с текста от лявата страна и снимката от дясната страна. Освен това основната колона вече е по-широка (75%). Същото важи и за вложената колона (66%).

И ето го крайния резултат!

Кликнете, за да видите в действие

Заключение

За това колко лесно е да работите с Flexbox на примера на оформлението на шаблон за новинарски сайт.

Повярвайте ми, няма нужда да навлизате във всички подробности за работата с Flexbox, ако искате да започнете да го използвате точно сега. В този урок авторът ще ви запознае с някои от функциите на Flexbox и ще създаде „оформление за новини“, подобно на това, което може да сте виждали на уебсайта на The Guardian.

Причината, поради която авторът използва Flexbox, е поради многото възможности, които предоставя:
- лекота на създаване на адаптивни колони;
- създаване на колони с еднаква височина;
- възможност за изтласкване на съдържанието до дъното на контейнера.

Да тръгваме!

1. Започнете, като създадете две колони

От своя страна Flexbox опростява този процес с редица предимства като:

Писане на по-чист код: всичко, което трябва да направим, е да създадем контейнер с правило дисплей: гъвкав;
- гъвкавост: можем да преоразмеряваме, разтягаме и подравняваме колони, като променяме няколко реда от CSS;
- семантично маркиране;
- в допълнение, с използването на Flexbox не е необходимо да се отменя обвиването, за да се избегне непредвидимо поведение на оформлението.

Нека започнем, като създадем две колони, една, която ще заеме 2/3 от ширината на нашия контейнер, и една, която ще заеме 1/3 от него.

Контейнер колони;
- два дъщерни елемента колона, като едната е с допълнителен клас основна колона, който използваме по-късно, за да направим колоната по-широка.

Колони ( дисплей: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Тъй като основна колонаима гъвкава стойност, равна на 2 , тогава тази колона ще заема два пъти повече място от втората.

Нека добавим малко визуален дизайн и в резултат на това получаваме:

Кликнете, за да видите в действие

2. Направете всяка колона flexbox контейнер

И така, имаме нужда от статии за:

Подредени вертикално вътре в контейнерна колона;
- зае цялото налично пространство.

правило flex-direction: колонаопределен за контейнера, заедно с правилото гъвкавост: 1посочен за дъщерния елемент позволява на статията да запълни цялото свободно пространство вертикално, като същевременно запазва височината на първите две колони непроменена.

Кликнете, за да видите в действие

3. Изработка на контейнер от артикул

заглавие;
- параграф;
- информационен панел с името на автора и броя на коментарите;
- някакво адаптивно изображение.

Тук използваме Flexbox, за да изместим информационната лента в долната част на елемента. Ето вижте какъв резултат очакваме да получим.

А ето и самия код:

Нанесли сме и имота гъвкавост: 1към елемент статия-съдържание, като по този начин го разтягате до цялото свободно пространство и натискате информация за статиятадо дъното. Височината на колоната в този случай няма значение.

Кликнете, за да видите в действие

4. Добавяне на множество вложени колони

Вложена колона ( flex: 2; )
Сега тази колона ще бъде два пъти по-широка от втората.

Кликнете, за да видите в действие

5. Изработка на първи артикул с хоризонтално оформление

First-article (flex-direction: row;) .first-article .article-body (flex: 1;) .first-article .article-image (височина: 300px; ред: 2; padding-top: 0; ширина: 400px; )
Имот поръчкаиграе голяма роля в този случай, защото ви позволява да промените реда на HTML елементите, без да променяте HTML маркирането. В действителност, статия-изображениев кода идва преди елемента статия-тяло, но се държи така, сякаш е след него.

Кликнете, за да видите в действие

6. Изработка на адаптивно оформление

Едно от страхотните неща на Flexbox е, че можете просто да премахнете правилото дисплей: гъвкавв контейнера, за да го деактивирате напълно (Flexbox), докато останалите му свойства (като напр подравняване на елементиили flex) ще остане в експлоатация.

В резултат на това можем да активираме адаптивното оформление, като активираме Flexbox само когато е необходимо.

Така че ще премахнем дисплей: гъвкавот селектори .колонии .колона, вместо да ги "опакова" в медийна заявка:

@медиен екран и (мин. ширина: 800px) ( .columns, .column ( display: flex; ) )
Това е всичко! На екрани с малка резолюция всички статии ще бъдат разположени една над друга, а на екрани с резолюция над 800 пиксела - в две колони.

7. Добавяне на финални щрихи

@медиен екран и (мин. ширина: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; ред: 2; padding-top: 0; ширина: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Съдържанието на първата статия е подравнено хоризонтално с текста от лявата страна и снимката от дясната страна. Освен това основната колона вече е по-широка (75%). Същото важи и за вложената колона (66%).

И ето го крайния резултат!

Кликнете, за да видите в действие

Заключение

Хей habr!

Една хубава вечер, която не предвещаваше нищо интересно, нашият чат получи предложение от автора на публикацията, написана от него през пролетта на 2012 г., да напишем римейк на статия, но с помощта на FlexBox и придружаващо обяснение какво и как върши работа. След известна част от съмненията, интересът да разбера спецификацията по-задълбочено все още спечели и аз безопасно седнах да набера точно тези примери. В процеса на потапяне в тази област започнаха да се появяват много нюанси, които се превърнаха в нещо повече от просто обръщане на оформления. Като цяло в тази статия искам да говоря за такава прекрасна спецификация, наречена „CSS модул за гъвкаво оформление на кутия“ и да покажа някои от интересните му функции и примери за приложение. Всички, които се интересуват, любезно ви каня на habrakat.

Това, на което бих искал да обърна внимание, за оформлението на оформлението на FlexBox, разработчикът ще се нуждае от известна степен на адаптация. Със собствен пример усетих, че дългогодишният опит изиграва лоша шега. FlexBox изисква малко по-различна представа за това как елементите са подредени в поток.

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

Така. Във FlexBox има два основни типа елементи: Flex Container и неговите деца, Flex Items. За да инициализирате контейнера, е достатъчно да присвоите чрез css елемента дисплей: гъвкав;или дисплей: inline-flex;. Разликата между flex и inline-flex е само в принципа на взаимодействие с елементите около контейнера, като display: block; и дисплей: inline-block;, съответно.

Вътре във гъвкавия контейнер се създават две оси, главна ос и перпендикулярна или напречна ос. Най-често гъвкавите елементи се подреждат точно по главната ос, а след това по напречната ос. По подразбиране главната ос е хоризонтална и се движи отляво надясно, докато напречната ос е вертикална и минава отгоре надолу.

Посоката на осите може да се контролира с помощта на свойството css гъвкава посока. Това свойство приема няколко стойности:
ред(по подразбиране): Главната ос на гъвкавия контейнер има същата ориентация като вградената ос на текущия режим на посока на реда. Началото (main-start) и краят (main-end) на посоката на главната ос съответстват на началото (inline-start) и края (inline-end) на вградената ос (inline-axis).
ред обратен: Всичко е същото като в реда, само main-start и main-end са разменени.
колона: същото като ред, само че сега главната ос е насочена отгоре надолу.
колона реверс: същото като row-reverse, само основната ос е отдолу нагоре.
Как работи може да се види в примера на jsfiddle.

По подразбиране всички гъвкави елементи в контейнер се побират на един ред, дори и да не се побират в контейнера, те излизат извън границите на контейнера. Това поведение се превключва с помощта на свойството гъвкава обвивка. Това свойство има три състояния:
Nowrap(по подразбиране): Гъвкавите елементи се подреждат отляво надясно.
обвивам: гъвкавите елементи се изграждат в многоредов режим, прехвърлянето се извършва в посока на напречната ос, отгоре надолу.
увийте обратно: същото като wrap, но се увива отдолу нагоре.
Да видим един пример.

За удобство има допълнителен имот гъвкав поток, в който можете едновременно да посочите гъвкава посокаи гъвкава обвивка. Изглежда така: гъвкав поток:

Елементите в контейнер могат да бъдат подравнени с помощта на свойство justify-contentпо главната ос. Това свойство приема до пет различни стойности.
гъвкав старт(по подразбиране): Елементите Flex са подравнени спрямо началото на главната ос.
гъвкав край: Елементите са подравнени към края на главната ос
център: Елементите са подравнени към центъра на главната ос
пространство между: Елементите заемат цялата налична ширина в контейнера, най-външните елементи прилягат плътно към ръбовете на контейнера, а свободното пространство е равномерно разпределено между елементите.
пространство наоколо: гъвкавите елементи са подравнени, така че свободното пространство да е равномерно разпределено между елементите. Но си струва да се отбележи, че разстоянието между ръба на контейнера и екстремните елементи ще бъде наполовина по-малко от пространството между елементите в средата на реда.
Разбира се, можете да щракнете върху пример за това как работи това свойство.

Това не е всичко, ние също имаме възможност да подравняваме елементи по напречната ос. Чрез прилагане на имота подравняване на елементи, който също приема пет различни стойности, можете да постигнете интересно поведение. Това свойство ви позволява да подравнявате елементи в ред един спрямо друг.
гъвкав старт: всички елементи се притискат към началото на реда
гъвкав край: елементите се притискат до края на реда
център: елементите са подравнени към центъра на реда
базова линия: Елементите се подравняват с основната линия на текста
опъвам, разтягам(по подразбиране): Елементите се разтягат, за да запълнят целия ред.

Друг подобен имот на предишния е подравнете съдържанието. Само той е отговорен за подравняването на цели линии спрямо гъвкавия контейнер. Няма да има ефект, ако flex елементите са на един ред. Свойството приема шест различни стойности.
гъвкав старт: всички линии са притиснати към началото на напречната ос
гъвкав край: всички линии са притиснати до края на напречната ос
център: Всички линии в пакет са подравнени към центъра на напречната ос
пространство между: линиите се разпределят от горния край към дъното, оставяйки свободно пространство между линиите, докато крайните линии се притискат към ръбовете на контейнера.
пространство наоколо: Линиите са равномерно разпределени в контейнера.
опъвам, разтягам(по подразбиране): Линиите се разтягат, за да запълнят наличното пространство.
Можете да опитате как работят align-items и align-content в този пример. Специално представих тези две свойства в един пример, тъй като те взаимодействат доста тясно, всяко изпълнявайки своята задача. Забележете какво се случва, когато елементите са поставени на един ред и на няколко реда.

Разбрахме параметрите на гъвкавия контейнер, остава да се справим със свойствата на гъвкавите елементи.
Първото свойство, с което ще се запознаем е поръчка. Това свойство ви позволява да промените позицията в потока на конкретен елемент. По подразбиране всички flex елементи имат ред: 0;и са изградени по реда на естественото течение. В примера можете да видите как елементите сменят местата си, ако към тях се приложат различни стойности на поръчката.

Едно от основните свойства е гъвкава основа. С това свойство можем да посочим основната ширина на гъвкав елемент. Стойността по подразбиране е Автоматичен. Този имот е тясно свързан с flex-growи flex-shrink, за което ще говоря малко по-късно. Приема стойност за ширина в px, %, em и други единици. Това не е точно ширината на гъвкавия елемент, това е нещо като отправна точка. Спрямо което елементът се разтяга или свива. В автоматичен режим елементът получава основна ширина спрямо съдържанието вътре в него.

flex-growна няколко ресурса има напълно неправилно описание. Пише, че се предполага, че задава съотношението на размерите на елементите в контейнера. Всъщност не е. Това свойство указва фактор за увеличаване на елемента, когато има свободно място в контейнера. Стойността по подразбиране за това свойство е 0. Нека си представим, че имаме гъвкав контейнер с ширина 500px, вътре в който има два flex елемента, всеки с основна ширина 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: няма, което означава гъвкав: 1 1 автоматичен;и гъвкавост: 0 0 автоматична;съответно.

Последното свойство на flex елементи е самоподравняване. Тук всичко е просто, това е същото като align-items за контейнера, което ви позволява да отмените подравняването за определен елемент.

Всички уморени! Хайде примери!

Като начало, нека обозначим основната ширина на страницата, подравнете я към центъра, натиснете долния колонтитул в долната част на страницата. Както винаги по принцип.

Html (фон: #ccc; мин. височина: 100%; семейство шрифтове: sans-serif; дисплей: -webkit-flex; дисплей: flex; flex-direction: колона; ) тяло ( марж: 0; подложка: 0 15px ; дисплей: -webkit-flex; дисплей: flex; flex-direction: колона; flex: auto; ) .header ( width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; padding : 30px 0 10px; дисплей: -webkit-flex; дисплей: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( width: 100%; max-width .footer (фон: #222; ширина: 100%; максимална ширина: 960px; мин. ширина: 430px; цвят: #eee; margin: auto; padding: 15px; box-sizing: border-box; )

Поради факта, че посочихме flex-grow за .main: 1; тя се разтяга до пълната налична височина, като по този начин притиска долния колонтитул към дъното. Бонусът с това решение е, че долният колонтитул може да бъде с нефиксирана височина.

Сега нека поставим логото и менюто в заглавката.
.logo ( размер на шрифта: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before (фон: #222; ширина: 50px; височина: 50px; поле: 0 10px 0 20px; border-radius: 50%; ) .logo:after (фон: #222; ширина: 90px; височина : 30px; ) .nav ( margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; width: 130px; height: 50px; размер на шрифта: 1,5 rem; цвят: #eee; украса на текст: няма; margin: 5px 0 0 5px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; )

Тъй като заглавката е настроена на flex-wrap: wrap; и justify-content: интервал между; логото и менюто са разпръснати от различни страни на заглавката и ако няма достатъчно място за менюто, то елегантно ще се измести под логото.

След това виждаме голям пост или банер, трудно ми е да кажа какво е конкретно, но и това не е важното. Имаме изображение отдясно и текст със заглавие отляво. Аз лично се придържам към идеята, че всички елементи трябва да бъдат възможно най-гъвкави, независимо дали са адаптивни или статични. Така че имаме странична лента в тази публикация, в която е поставена картината, строго погледнато, не можем да кажем точно каква ширина ни е необходима, защото днес имаме голяма картина, утре малка и всеки път не сме склонни да преработваме елемента от нулата. Така че имаме нужда страничната лента да заеме мястото, от което се нуждае, а останалата част от мястото отива към съдържанието. Да го направим:

Кутия (размер на шрифта: 1,25 rem; височина на реда: 1,5; стил на шрифта: курсив; поле: 0 0 40px -50px; дисплей: -webkit-flex; дисплей: flex; flex-wrap: wrap; justify-content: център; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100%; височина : Автоматичен; )

Както можете да видите за .box-base, където имаме заглавието и текста, съм посочил ширината на основата с гъвкава основа: 430px, а също така забранява свиването на блока с помощта гъвкаво свиване: 0;. С тази манипулация казахме, че съдържанието не може да стане по-малко от 430px широко. И с оглед на това, че за .box уточнявам flex-wrap: обвивка;в момента, когато страничната лента и съдържанието няма да бъдат поставени в container.box, страничната лента автоматично ще попадне под съдържанието. И всичко това без да използвате @ медии! Мисля, че наистина е страхотно.

Остава ни съдържание от три колони. Има няколко решения на този проблем, ще покажа едно от тях, в останалите оформления има друга опция.
Нека създадем контейнер, наименуваме го .content и го настроим.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Контейнерът има три колони, .банери, .публикации, .коментари
.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 и (максимална ширина: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @медиен екран и (максимална ширина: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Това е цялата магия на изграждането на оформление на FlexBox. Друга задача, която ми хареса, е в 5-то оформление, по-специално се отнася до адаптирането на съдържанието.

Виждаме как публикациите с разделителна способност на работния плот са вградени в мрежа от три в един ред. Когато ширината на прозореца за изглед е по-малка от 800 пиксела, решетката се превръща в колона с публикации, където снимката на публикацията се подрежда последователно от лявата и дясната страна на съдържанието на публикацията. И ако ширината е по-малка от 600px, снимката на публикацията е напълно скрита.
.grid ( дисплей: -webkit-flex; дисплей: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px * 2/3); дисплей: -webkit-flex; дисплей: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen и (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: ляво; ) ) @медиен екран и (максимална ширина: 600px) ( .grid-img ( дисплей: няма; ) )

Всъщност това е само малка част от това, което може да се внедри на FlexBox. Спецификацията ви позволява да създавате много сложни оформления на страници, докато използвате прост код.

Съдържание:

Flexboxе нов начин за подреждане на блокове на страница. Това е технология, създадена специално за оформление на елементи, за разлика от плувките. Като се използва Flexboxможете лесно да подравнявате елементи хоризонтално и вертикално, да променяте посоката и реда на показване на елементите, да разтягате блокове до пълната височина на родителя или да ги приковавате към долния ръб.

UPD от 02.02.2017 г.:направи удобен flexbox cheatsheet с демонстрации на живо и описания от спецификацията: Flexbox cheatsheet .

Примерите използват само новия синтаксис. Към момента на писане те са най-правилно показани в Chrome. Във Firefox работят частично, в Safari изобщо не работят.

Според caniuse.com, Flexboxне се поддържа от IE 8 и 9 и Opera Mini, а други браузъри не поддържат всички свойства и/или изискват префикси.

Това означава, че технологията не може да се използва широко в момента, но сега е моментът да я опознаете по-добре.

Първо трябва да знаете, че гъвкавите елементи са подредени по осите. По подразбиране елементите са подредени хоризонтално - по дължина главна ос- основната ос.

Освен това имайте предвид, че когато използвате Flexbox float, clear и vertical-align не работят за вътрешни блокове, както и свойства, които задават колони в текста.

Нека подготвим тестова площадка за експерименти:

Един родителски блок (жълт) и 5 ​​деца.

Дисплей: флекс

И сега към родителския елемент добавяме display: flex; . Вътрешните div се подреждат (по главната ос) с колони с еднаква височина, независимо от съдържанието.

дисплей: гъвкав; прави всички дъщерни елементи плавни - гъвкави, а не вградени или блокиращи, както беше първоначално.

Ако родителският блок съдържа картини или текст без обвиване, те стават анонимни гъвкави елементи.

показване на свойство за Flexboxможе да приема две стойности:

flex - държи се като блоков елемент. При изчисляване на ширината на блоковете, оформлението има приоритет (ако ширината на блоковете е недостатъчна, съдържанието може да изпълзи извън границите).

inline-flex - държи се като inline-block. Приоритет на съдържанието (съдържанието разпръсква блоковете до необходимата ширина, така че линиите да паснат, ако е възможно).

Flex посока

Посоката, в която са разположени блоковете, се контролира от свойството flex-direction.

Възможни стойности:

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

ред и ред-обратно

колона и колона-реверс

Flex-обвивка

Една линия може да има много блокове. Дали се обвиват или не се определя от свойството flex-wrap.

Възможни стойности:

nowrap - блоковете не се обвиват (стойност по подразбиране); обвиване - блоковете се обвиват; wrap-reverse - блоковете се увиват и поставят в обратен ред.

За да съкратите свойствата flex-direction и flex-wrap, има свойство: flex-flow.

Възможни стойности: можете да зададете и двете свойства или само едно. Например:

flex-flow: колона; flex-flow: wrap-reverse; flex-flow: обратно обвиване на колона;

Демонстрация за обръщане на ред, обръщане на ред:

поръчка

Свойството order се използва за контрол на реда на блоковете.

Възможни стойности: числа. За да поставите блок първи, дайте му ред: -1:

justify-content

Има няколко свойства за подравняване на елементи: justify-content, align-items и align-self.

justify-content и align-items се прилагат към родителския контейнер, подравняват се към дъщерните.

justify-content отговаря за подравняването на главната ос.

Възможни стойности за justify-content:

flex-start - елементите се подравняват от началото на главната ос (стойност по подразбиране); flex-end - елементите се подравняват от края на главната ос; център - елементите са подравнени спрямо центъра на главната ос; пространство между - елементите са подравнени по главната ос, разпределяйки свободното пространство помежду си; space-around - елементите са подравнени по главната ос, разпределяйки свободно пространство около тях.

flex-начало и flex-end

интервал-между , интервал-около

Подравнете елементите

align-items отговаря за подравняването по перпендикулярната ос.

Възможни стойности за подравняване на елементи:

flex-start - елементите се подравняват от началото на перпендикулярната ос; flex-end - елементите се подравняват от края на перпендикулярната ос; център - елементите са центрирани; базова линия - елементите са подравнени по основната линия; разтягане - елементите се разтягат, за да заемат цялото пространство по перпендикулярната ос (стойност по подразбиране).

гъвкав-начало, гъвкав-край

основна линия, разтягане

Самоподравняване

align-self също е отговорен за подравняването по перпендикулярната ос, но е зададен на отделни гъвкави елементи.

Възможни стойности за самоподравняване:

auto е стойността по подразбиране. Показва, че елементът използва align-items на родителския елемент; flex-start - елементът се подравнява от началото на перпендикулярната ос; flex-end - елементът е подравнен от края на перпендикулярната ос; център - елементът е центриран; базова линия - елементът е подравнен спрямо базовата линия; разтягане - елементът е опънат, заемайки цялото пространство във височина.

Подравняване на съдържанието

За да контролирате подравняването вътре в многоредов гъвкав контейнер, има свойството align-content.

Възможни стойности:

flex-start - елементите се подравняват от началото на главната ос; flex-end - елементите се подравняват от края на главната ос; център - елементите са подравнени спрямо центъра на главната ос; пространство между - елементите са подравнени по главната ос, разпределяйки свободното пространство помежду си; space-around - елементите са подравнени по главната ос, разпределяйки свободно пространство около тях; stretch - елементите се разтягат, за да запълнят цялата височина (стойност по подразбиране).

гъвкав-начало, гъвкав-край

център , разтягане

интервал-между , интервал-около

ПС:Някои неща така и не успях да видя в действие, например редът flex-flow: column wrap или пълният запис на същия flex-direction: column; flex-wrap: обвивка; .

Елементите са подредени, но не са обвити:

Wrap не работи с flex-direction: column; , въпреки че в спецификацията изглежда така:

Мисля, че с времето ще проработи.

UPD от 21.06.2014 г.:Всичко работи, ако зададете височина на блока. Благодаря за бакшиша