Vlastnosť flex v CSS je skratka pre flex-grow, flex-shrink, a flex-base. Funguje iba na flexibilných položkách, takže ak položka kontajnera nie je flexibilná položka, flex vlastnosť neovplyvní príslušnú položku.

Táto vlastnosť sa používa na nastavenie dĺžky flexibilných položiek. Umiestnenie podradených prvkov a hlavného kontajnera je s touto vlastnosťou CSS jednoduché. Používa sa na nastavenie toho, ako sa flexibilný prvok zmenší alebo zväčší, aby sa zmestil do priestoru.

The flex vlastnosť môže byť špecifikovaná jednou, dvoma alebo tromi hodnotami.

• Ak existuje syntax s jednou hodnotou, hodnota musí byť buď číslo, alebo kľúčové slová, ako napr žiadne, auto, alebo počiatočné .
• Ak existuje syntax dvoch hodnôt, prvá hodnota musí byť číslo (používa sa ako flex-grow ), druhá hodnota môže byť číslo (používa sa pre flex-shrink ) alebo platnú hodnotu šírky (používa sa ako flex-base ).
• Ak existuje syntax s tromi hodnotami, hodnoty musia nasledovať v poradí: a číslo pre flexibilný rast, a číslo pre flex-zmrštenie, a platný šírka hodnotu pre flex-base .

Syntax

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

Hodnoty vlastností

Flex-Grow: Je to kladné bezjednotkové číslo, ktoré určuje faktor flex-grow. Špecifikuje, o koľko bude položka rásť v porovnaní s ostatnými flexibilnými položkami. Záporné hodnoty nie sú povolené. Ak je vynechaný, nastaví sa na hodnotu 1 .

flex-zmrštenie: Je to kladné bezjednotkové číslo, ktoré určuje faktor zmrštenia ohybom. Špecifikuje, o koľko sa položka zmenší v porovnaní s ostatnými flexibilnými položkami. Záporné hodnoty nie sú povolené. Ak sa vynechá, nastaví sa na hodnotu 1 .

flexibilný základ: Je to dĺžka v relatívnych alebo absolútnych jednotkách, ktorá definuje počiatočnú dĺžku ohybnej položky. Používa sa na nastavenie dĺžky flex-položky. Jeho hodnoty môžu byť auto, zdediť, alebo číslo, za ktorým nasledujú jednotky dĺžky, ako napr em, px, atď. Záporné hodnoty nie sú povolené. Ak je vynechaný, nastaví sa na hodnotu 0 .

auto: Táto hodnota vlastnosti flex je ekvivalentná 11 auto .

žiadne: Táto hodnota vlastnosti flex je ekvivalentná 0 0 auto . Ohybné prvky nerastie ani nezmršťuje.

počiatočné: Nastaví vlastnosť na predvolenú hodnotu. Je to ekvivalentné 0 0 auto .

zdediť: Dedí vlastnosť od svojho nadradeného prvku.

Príklad

V tomto príklade sú tri kontajnery, z ktorých každý má tri flexibilné položky. The šírka a výška kontajnerov sú 300 pixelov a 100 pixelov .

Uplatňujeme ohyb: 1; na flexibilné položky prvého kontajnera, flex: 0 50px; k ohybným položkám druhého kontajnera a ohyb: 2 2; na flexibilné položky tretieho kontajnera.

 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> 

Výkon