Флек - ЦСС-трикови

flexИмовина је под-својство Флексибилна кутија Лаиоут модула.

То је скраћеница за flex-grow, flex-shrinkи flex-basis. Други и трећи параметар ( flex-shrinkи flex-basis) нису обавезни.

Синтакса

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Ево тачке за мапирање вредности у зависности од тога колико вредности дајете:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Заједничке вредности за flex

флекс: 0 ауто;

То је исто као flex: initial;и скраћеница за вредност: flex: 0 1 auto. Ставку одређује на основу њених width/ heightсвојстава (или садржаја ако није подешен).

Чини флексибилни предмет нефлексибилним када остане мало слободног простора, али му омогућава да се смањи на минимум када нема довољно простора. Способности поравнања или autoмаргине могу се користити за поравнавање флексибилних предмета дуж главне осе.

флекс: ауто;

Ово је еквивалентно flex: 1 1 auto. Пазите, ово није подразумевана вредност. Предмет димензионира на основу његових width/ heightсвојстава, али га чини потпуно флексибилним тако да апсорбује сваки додатни простор дуж главне осе.

Ако све ставке су или flex: auto, flex: initialили flex: none, преостали простор након су величине, ствари ће бити равномерно распоређена на ставке са flex: auto.

флекс: ниједан;

Ово је еквивалентно flex: 0 0 auto. Ставку прилагођава према њеним width/ heightсвојствима, али је чини потпуно нефлексибилном.

Ово је слично, flex: initialосим што се не сме смањити, чак ни у ситуацији преливања.

флек:

Еквивалентно flex: 1 0px. То флексибилну ставку чини флексибилном и поставља флексибилну основу на нулу, што резултира ставком која прима наведени део преосталог простора.

Ако сви предмети у флекс контејнеру користе овај образац, њихове величине ће бити пропорционалне наведеном фактору флексије.

Демо

Следећа демонстрација приказује врло једноставан изглед са Флекбок-ом захваљујући flexсвојству:

Ево откривеног дела кода:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Прво, одобрили смо флекс ставке за приказ у више редова помоћу flex-flow: row wrap.

Тада кажемо и заглављу и подножју да заузму 100% тренутне ширине оквира за приказ, без обзира на све.

И главни садржај и обе бочне траке делиће исти ред, делећи преостали простор на следећи начин: 66% (2 / (1 + 2)) за главни садржај, 33% (1 / (1 + 2)) за бочну траку .

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

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

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

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

За више информација о томе како мешати синтаксе како бисте добили најбољу подршку за прегледач, погледајте овај чланак (ЦСС-трикови) или овај чланак (ДевОпера).