Својство флек у ЦСС-у је скраћеница за флек-гров, флек-схринк, и флек-басис . Ради само на флек-ставкама, тако да ако ставка контејнера није флек-ставка, флек својство неће утицати на одговарајућу ставку.

Ово својство се користи за подешавање дужине флексибилних ставки. Позиционирање подређених елемената и главног контејнера је лако са овим ЦСС својством. Користи се за подешавање начина на који ће се флек-ставка смањити или повећати да би се уклопила у простор.

Тхе флек својство се може специфицирати са једном, две или три вредности.

• Када постоји синтакса једне вредности, вредност мора бити или број или кључне речи као што су ниједан, ауто, или почетни .
• Када постоји синтакса са две вредности, прва вредност мора бити број (користи се као флек-гров ), друга вредност може бити број (користи се за флек-схринк ) или важећу вредност ширине (користи се као флек-басис ).
• Када постоји синтакса са три вредности, онда вредности морају да прате редослед: а број за флек-гров, а број за флексибилно скупљање, и валидан ширина вредност за флек-басис .

Синтакса

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

Вредности својства

флек-гров: То је позитиван број без јединица који одређује фактор флексибилног раста. Он одређује колико ће ставка расти у поређењу са другим флексибилним ставкама. Негативне вредности нису дозвољене. Ако је изостављен, онда се поставља на вредност 1 .

флек-схринк: То је позитиван број без јединица који одређује фактор флексибилног скупљања. Одређује колико ће се ставка смањити у поређењу са другим флексибилним ставкама. Негативне вредности нису дозвољене. Ако је изостављен, онда се поставља на вредност 1 .

флек-басис: То је дужина у релативним или апсолутним јединицама која дефинише почетну дужину флек-ставке. Користи се за подешавање дужине флек-итема. Његове вредности могу бити ауто, наследити, или број иза којег следе јединице дужине као што су ем, пк, итд. Негативне вредности нису дозвољене. Ако је изостављен, онда се поставља на вредност 0 .

ауто: Ова вредност својства флек је еквивалентна 1 1 ауто .

ниједан: Ова вредност својства флек је еквивалентна 0 0 ауто . Не расте нити скупља флек-итеме.

почетно: Поставља својство на његову подразумевану вредност. То је еквивалентно 0 0 ауто .

наследити: Наслеђује својство од свог родитељског елемента.

Пример

У овом примеру постоје три контејнера, од којих сваки има три флек-ставке. Тхе ширина а висина контејнера су 300пк и 100пк .

Ми примењујемо флек: 1; на флек-ставке првог контејнера, флек: 0 50пк; на флек-ставке другог контејнера, и флек: 2 2; на флек-ставке трећег контејнера.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Излаз