Комплетан водич за Флекбок - ЦСС-трикови

Позадина

Flexbox Layout(Флексибилни кутија) модул (препоруку В3Ц је кандидат од октобра 2017. године) има за циљ да пружи много ефикаснији начин да нокаутирати, сизе и дистрибуцију простор између ставки у контејнеру, чак и када је њихова величина је непознат и / или динамички (на тај начин реч „флекс“).

Главна идеја која стоји иза флексибилног распореда је дати контејнеру могућност да мења ширину / висину својих предмета (и редослед) како би најбоље попунио расположиви простор (углавном за прилагођавање свим врстама уређаја за приказ и величинама екрана). Флексибилни контејнер проширује предмете како би попунио слободни простор или их смањује како би спречио преливање.

Што је најважније, флексбокс распоред је агностички за смер, за разлику од редовних распореда (блок који је вертикално заснован и инлине који је хоризонтално заснован). Иако оне добро функционишу за странице, недостаје им флексибилности (није намењена каламбуру) за подршку великим или сложеним апликацијама (посебно када је реч о промени оријентације, величини, истезању, скупљању итд.).

Напомена: Изглед Флекбок-а је најприкладнији за компоненте апликације и мале размере, док је распоред мреже намењен распоредима већих размера.

Основе и терминологија

Будући да је флекбок читав модул, а не једно својство, он укључује пуно ствари, укључујући и читав скуп својстава. Неки од њих треба да буду постављени на контејнер (родитељски елемент, познат као „флекс контејнер“), док други треба да буду постављени на децу (речени „флекс предмети“).

Ако се „редовни“ распоред заснива и на блоковском и на линијском смеру протока, флекс распоред се заснива на „смерима флекс-протока“. Молимо погледајте ову слику из спецификације, објашњавајући главну идеју која стоји иза флекс распореда.

Предмети ће се распоредити пратећи или main axis(од main-startдо main-end) или попречну осу (од cross-startдо cross-end).

главна оса - Главна ос флексибилног контејнера је примарна ос дуж које се постављају елементи савијања. Пазите, није нужно хоризонтално; то зависи од flex-directionимовине (види доле).
главни почетак | главни крај - Флекс предмети се постављају у контејнер почев од главног и главног краја.
главна величина - Ширина или висина флексибилног предмета, која год да је у главној димензији, главна је величина предмета. Својство главне величине флекс ставке је својство „ширина“ или „висина“, зависно од тога шта је у главној димензији.
попречна ос - ос која је окомита на главну осу назива се попречна ос. Његов правац зависи од смера главне осе.
унакрсни старт | попречни крај - Флекс линије се попуњавају предметима и стављају у контејнер почев од попречне стране флекс контејнера и идући према попречној страни.
величина крста - ширина или висина флекс предмета, која год да је у попречној димензији, је величина крста предмета. Својство укрштене величине је оно од „ширине“ или „висине“ која је у попречној димензији.

Узми постер!

Често се позивате на овај водич? Закачите копију на зид канцеларије.

Буи Постер

Својства родитеља
(флекс контејнер)

приказ

Ово дефинише флекс контејнер; ред или блок у зависности од задате вредности. Омогућава флексибилни контекст за сву своју директну децу.

.container ( display: flex; /* or inline-flex */ )

Имајте на уму да ЦСС колоне немају утицаја на флекс контејнер.

флекс-смер

Овим се успоставља главна оса, дефинишући на тај начин смер флекс предмета који се постављају у флекс контејнер. Флекбок је (осим опционог умотавања) концепт распореда у једном смеру. Замишљајте флек предмете као примарно постављање било у хоризонталне редове или вертикалне колоне.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(подразумевано): слева надесно у ltr; здесна налево уrtl
row-reverse: здесна налево у ltr; слева надесно уrtl
column: исто као rowи одозго надоле
column-reverse: исто као row-reverseи одоздо према горе

флек-врап

Подразумевано, сви флек елементи ће покушати да стану у један ред. Можете то променити и дозволити да се предмети по потреби умотавају у ово својство.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (подразумевано): све флекс ставке биће у једном реду
wrap: флек елементи ће се премотати у више линија, од врха до дна.
wrap-reverse: флек елементи ће се умотати у више линија одоздо према горе.

Овде су неке визуелне демонстрације flex-wrap.

флекс-ток

Ово је скраћеница за flex-directionи flex-wrapимовине, који заједно дефинишу основне и попречних осе Флек амбалаже. Подразумевана вредност је row nowrap.

.container ( flex-flow: column wrap; )

оправдати-садржај

Ово дефинише поравнање дуж главне осе. Помаже у дистрибуцији вишка слободног простора када су или сви флек елементи на линији нефлексибилни или су флексибилни, али су достигли максималну величину. Такође врши одређену контролу над поравнањем ставки када пређу линију.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (подразумевано): ставке су спаковане на почетку флексибилног смера.
flex-end: предмети су спаковани према крају флекс-смера.
start: предмети су спаковани према почетку writing-modeправца.
end: предмети се пакују према крају writing-modeправца.
left: предмети су спаковани према левој ивици контејнера, осим ако то нема смисла flex-direction, тада се понаша као start.
right: предмети су спаковани према десној ивици контејнера, осим ако то нема смисла flex-direction, тада се понаша као end.
center: ставке су центриране дуж линије
space-between: ставке су равномерно распоређене у линији; прва ставка је у почетној линији, последња ставка у крајњој линији
space-around: ставке су равномерно распоређене у линији са једнаким простором око њих. Имајте на уму да размаци визуелно нису једнаки, јер сви предмети имају једнак простор на обе стране. Прва ставка имаће једну јединицу простора уз ивицу контејнера, али две јединице простора између следеће ставке, јер та следећа ставка има свој размак који се примењује.
space-evenly: ставке су распоређене тако да је размак између било које две ставке (и простора до ивица) једнак.

Имајте на уму да је подршка претраживача за ове вредности нијансирана. На пример, space-betweenникада нисмо добили подршку од неких верзија Едге-а, а почетак / крај / лево / десно још увек нису у Цхроме-у. МДН има детаљне графиконе. Најбезбеднији вредности су flex-start, flex-endи center.

Постоје и две додатне кључне речи које можете упарити са овим вредностима: safeи unsafe. Коришћење safeосигурава да, како год радили ову врсту позиционирања, не можете гурнути елемент тако да се приказује ван екрана (нпр. Од врха) на такав начин да се и садржај не може померати (што се назива „губитак података“) .

алигн-итемс

Ово дефинише подразумевано понашање за начин на који су флек елементи постављени дуж попречне осе на тренутној линији. Замислите то као justify-contentверзију за попречну осу (окомиту на главну осу).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (подразумевано): истегните да напуните контејнер (и даље поштујте минималну ширину / максималну ширину)
flex-start/ start/ self-start: предмети се постављају на почетак попречне осе. Разлика између њих је суптилна и односи се на поштовање flex-directionправила или writing-modeправила.
flex-end/ end/ self-end: предмети се постављају на крај попречне осе. Разлика је опет суптилна и односи се на поштовање flex-directionправила насупрот writing-modeправилима.
center: предмети су центрирани у попречној оси
baseline: ставке су поравнате као што су полазне линије поравнате

safeИ unsafeмодификацију кључне речи може да се користи у комбинацији са свим осталим ових кључних речи (иако подршка Напомена претраживач), а баве се помогне да спречите усклађивање елемената тако да садржај постане недоступан.

алигн-цонтент

Ово поравнава линије флексибилног контејнера унутар када постоји додатни простор у попречној оси, слично као што се justify-contentпоравнавају појединачни елементи унутар главне осе.

Напомена: Ово својство ступа на снагу само у флексибилним контејнерима са више редова, где flex-flowје постављено на или wrapили wrap-reverse). Једноструки флексибилни контејнер (тј. Где flex-flowје постављена на подразумевану вредност, no-wrap) неће се одразити align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (подразумевано): ставке се пакују у њихов задати положај као да није постављена вредност.
flex-start/ start: предмети спаковани до почетка контејнера. (Подржаније) flex-startпоштује flex-directionдок док startпоштује writing-modeсмер.
flex-end/ end: предмети спаковани до краја контејнера. (Више подршке) flex-endпоштује, flex-directionдок крај поштује writing-modeправац.
center: предмети центрирани у контејнеру
space-between: предмети равномерно распоређени; први ред је на почетку контејнера, док је последњи на крају
space-around: ставке равномерно распоређене са једнаким размаком око сваке линије
space-evenly: предмети су равномерно распоређени са једнаким простором око себе
stretch: линије се протежу да заузму преостали простор

Својства за децу
(флексибилни предмети)

ред

Подразумевано, флекс ставке су поредане у изворном редоследу. Међутим, orderсвојство контролише редослед којим се појављују у флекс контејнеру.

.item ( order: 5; /* default is 0 */ )

флекс-расти

Ово дефинише способност флексибилног предмета да расте ако је потребно. Прихвата јединствену вредност која служи као пропорција. Диктира количину расположивог простора унутар флекс контејнера који би ставка требало да заузме.

Ако су сви предмети flex-growпостављени на 1, преостали простор у контејнеру биће подељен подједнако свој деци. Ако једно од деце има вредност 2, преостали простор заузимаће двоструко више простора од осталих (или ће покушати, бар).

.item ( flex-grow: 4; /* default 0 */ )

Негативни бројеви су неважећи.

флекс-скупљање

Ово дефинише способност савијања предмета ако је потребно.

.item ( flex-shrink: 3; /* default 1 */ )

Негативни бројеви су неважећи.

флекс-основа

Ово дефинише подразумевану величину елемента пре расподеле преосталог простора. То може бити дужина (нпр. 20%, 5рем, итд.) Или кључна реч. Кључна autoреч значи „погледајте својство ширине или висине“ (што је main-sizeкључна реч привремено радила док није застарела). У contentкључним речима значи "величина је на основу садржаја ставке" - ова кључна реч није добро увек подржан, тако да је тешко да се тест и теже да зна шта су њени браћа max-content, min-contentи fit-contentдо.

.item ( flex-basis: | auto; /* default auto */ )

Ако је постављено на 0, додатни простор око садржаја се не узима у обзир. Ако се постави на auto, додатни простор се распоређује на основу његове flex-growвредности. Погледајте ову графику.

флекс

Ово је скраћеница за flex-grow, flex-shrinkи flex-basisкомбиновано. Други и трећи параметар ( flex-shrinkи flex-basis) нису обавезни. Подразумевано је 0 1 auto, али ако га подесите са једним бројем, то је као 1 0.

.item ( flex: none | ( ? || ) )

Препоручује се да користите ово стенографско својство, а не да постављате појединачна својства. Стенографија интелигентно поставља остале вредности.

поравнати-се

Ово омогућава надјачавање подразумеваног поравнања (или оног наведеног align-items) за појединачне флекс ставке.

Погледајте align-itemsобјашњење да бисте разумели доступне вредности.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Имајте на уму да float, clearи vertical-alignнемају утицаја на флек ставку.

Примери

Почнимо са врло једноставним примером, решавањем готово свакодневног проблема: савршено центрирање. Не може бити једноставније ако користите флекбок.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

Ово се ослања на чињеницу да маргина постављена на autoфлексибилни контејнер апсорбује додатни простор. Дакле, постављање вертикалне маргине autoучинит ће предмет савршено центрираним у обе осе.

Сада ћемо користити још нека својства. Размотрите списак од 6 предмета, сви са фиксним димензијама, али могу се аутоматски прилагодити величини. Желимо да буду равномерно распоређени по хоризонталној оси, тако да када променимо величину прегледача, све се лепо скалира и без медијских упита.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Готово. Све остало је само нека стајлинг брига. Испод је оловка са овим примером. Обавезно идите на ЦодеПен и покушајте да промените величину прозора да бисте видели шта се догађа.

Покушајмо нешто друго. Замислимо да имамо навигациони елемент поравнан удесно на самом врху наше веб странице, али желимо да он буде усредсређен на екране средње величине и на једном ступу на малим уређајима. Довољно лако.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Покушајмо нешто још боље играјући се флексибилношћу флексибилних предмета! Шта је са распоредом мобилних уређаја са три колоне са заглављем и подножјем пуне ширине. И неовисно о редоследу извора.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Префикс Флекбок

Флекбок захтева префикс добављача да би подржао већину прегледача. Не укључује само својства која претходе префиксу добављача, већ заправо постоје потпуно различита имена својстава и вредности. То је зато што су се спецификације Флекбок-а мењале током времена, стварајући „стару“, „уједначену“ и „нову“ верзију.

Можда је најбољи начин да се ово реши је да напишете нову (и коначну) синтаксу и покренете свој ЦСС кроз Аутопрефикер, који одлично решава повратне информације.

Као алтернативу, ево Сасс-а који @mixinће вам помоћи у вези са неким од префикса, који вам такође даје идеју о томе какве ствари треба урадити:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Повезана својства

Комплетан водич за мрежу
Уноси алманаха о својствима мреже, попут грид-ров / грид-цолумн

Остали ресурси

Флекбок у ЦСС спецификацијама
Флекбок на МДН
Флекбок у Опери
Роњење у Флекбок од Боцоупа
Мешање синтаксе за најбољу подршку прегледача на ЦСС-триковима
Флекбок, аутор Рапхаел Гоеттер (ФР)
Флекплорер, Беннетт Феели

Бубе

Флекбок сигурно није без својих грешака. Најбоља колекција од њих коју сам видео су Фликсбугови Филипа Волтона и Грега Витворта. То је место отвореног кода за праћење свих њих, па мислим да је најбоље да се само повежете са тим.

Подршка прегледача

Прекинуо „верзија“ флексбокса:

(ново) значи недавну синтаксу из спецификације (нпр. display: flex;)
(твеенер) значи чудну незваничну синтаксу из 2011. године (нпр. display: flexbox;)
(стара) значи стара синтакса из 2009. године (нпр. display: box;)

Хром	Сафари	Фирефок	Опера	ИЕ	Ивица	Андроид	иОС
20- (стари) 21+ (нови)	3,1+ (стари) 6,1+ (нови)	2-21 (стари) 22+ (нови)	12,1+ (ново)	10 (твеенер) 11+ (ново)	17+ (ново)	2,1+ ( стари) 4,4+ (нови)	3,2+ (стари) 7,1+ (нови)

Прегледач Блацкберри 10+ подржава нову синтаксу.