Vlastnost flex v CSS je zkratka pro flex-grow, flex-shrink, a flex-base. Funguje pouze u flexibilních položek, takže pokud položka kontejneru není flexibilní položka, flex vlastnost neovlivní odpovídající položku.
Tato vlastnost se používá k nastavení délky flexibilních položek. Umístění podřízených prvků a hlavního kontejneru je s touto vlastností CSS snadné. Používá se k nastavení, jak se bude flex-položka zmenšovat nebo růst, aby se vešla do prostoru.
The flex vlastnost může být specifikována jednou, dvěma nebo třemi hodnotami.
- Pokud existuje syntaxe s jednou hodnotou, hodnota musí být buď číslo, nebo klíčová slova, jako např žádný, auto, nebo počáteční .
- Pokud existuje syntaxe dvou hodnot, první hodnota musí být číslo (používá se jako flex-grow ), druhá hodnota může být číslo (používá se pro flex-shrink ) nebo platnou hodnotu šířky (používá se jako flex-base ).
- Pokud existuje syntaxe se třemi hodnotami, musí hodnoty následovat pořadí: a číslo pro flex-grow, A číslo pro flex-smršťovací, a platný šířka hodnotu pro flex-base .
Syntax
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Hodnoty vlastností
flex-růst: Je to kladné bezjednotkové číslo, které určuje faktor flex-grow. Určuje, jak moc položka poroste ve srovnání s ostatními flexibilními položkami. Záporné hodnoty nejsou povoleny. Pokud je vynechán, nastaví se na hodnotu 1 .
flex-smršťovací: Je to kladné bezjednotkové číslo, které určuje faktor smrštění ohybem. Určuje, jak moc se položka zmenší ve srovnání s ostatními flexibilními položkami. Záporné hodnoty nejsou povoleny. Pokud je vynechán, nastaví se na hodnotu 1 .
flexibilní základ: Je to délka v relativních nebo absolutních jednotkách, která definuje počáteční délku flexibilní položky. Slouží k nastavení délky flex-položky. Jeho hodnoty mohou být auto, zdědit, nebo číslo následované jednotkami délky, jako např em, px, atd. Záporné hodnoty nejsou povoleny. Pokud je vynechán, nastaví se na hodnotu 0 .
auto: Tato hodnota vlastnosti flex je ekvivalentní 11 auto .
žádný: Tato hodnota vlastnosti flex je ekvivalentní 0 0 auto . Flex-položky neroste ani se nezmenšuje.
počáteční: Nastaví vlastnost na výchozí hodnotu. Je ekvivalentní k 0 0 auto .
zdědit: Zdědí vlastnost od svého nadřazeného prvku.
Příklad
V tomto příkladu jsou tři kontejnery, z nichž každý má tři ohebné položky. The šířka a výška nádob jsou 300 pixelů a 100 pixelů .
Uplatňujeme flex: 1; na flexibilní položky prvního kontejneru, flex: 0 50px; k pružným položkám druhého kontejneru a flex: 2 2; na flexibilní položky třetího kontejneru.
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> Otestujte to hned Výstup
