A flex tulajdonság a CSS-ben a következő rövidítése flex-grow, flex-shrink, és rugalmas alapú . Csak a rugalmas elemeken működik, tehát ha a tároló eleme nem rugalmas, a Flex tulajdonság nem lesz hatással a megfelelő tételre.

Ez a tulajdonság a rugalmas elemek hosszának beállítására szolgál. A gyermekelemek és a fő tároló elhelyezése egyszerű ezzel a CSS-tulajdonsággal. Arra szolgál, hogy beállítsa, hogyan zsugorodjon vagy nőjön egy rugalmas elem, hogy elférjen a térben.

A Flex tulajdonság megadható egy, kettő vagy három értékkel.

• Ha létezik egyértékű szintaxis, akkor az értéknek vagy egy számnak vagy a kulcsszavaknak, pl nincs, auto, vagy a kezdeti .
• Ha létezik kétértékű szintaxis, az első értéknek számnak kell lennie (mint flex-grow ), a második érték lehet egy szám (a rugalmas-zsugorodás ) vagy érvényes szélességi érték (mint rugalmas alapú ).
• Ha háromértékű szintaxis van, akkor az értékeknek a következő sorrendet kell követniük: a szám a rugalmas növekedés, a szám a rugalmas zsugorodás, és egy érvényes szélesség érték rugalmas alapú .

Szintaxis

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

Tulajdonértékek

flex-grow: Ez egy pozitív egység nélküli szám, amely meghatározza a flex-növekedési tényezőt. Meghatározza, hogy az elem mennyit fog növekedni a többi rugalmas elemhez képest. Negatív értékek nem megengedettek. Ha kimarad, akkor az értékre áll be 1 .

rugalmas zsugorodás: A pozitív egység nélküli szám határozza meg a rugalmas zsugorodási tényezőt. Meghatározza, hogy a cikk mennyivel zsugorodik a többi rugalmas elemhez képest. Negatív értékek nem megengedettek. Ha kimarad, akkor az értékre áll be 1 .

rugalmas alapú: A relatív vagy abszolút egységekben megadott hosszúság határozza meg a rugalmas elem kezdeti hosszát. A rugalmas elem hosszának beállítására szolgál. Értékei lehetnek autó, örökség, vagy egy szám, amelyet a hosszúság mértékegységei követnek, mint pl em, px, stb. Negatív értékek nem megengedettek. Ha kimarad, akkor az értékre áll be 0 .

auto: A flex tulajdonság értéke megegyezik a 11 autó .

egyik sem: A flex tulajdonság értéke megegyezik a 0 0 auto . Sem nem növeli, sem nem zsugorítja a rugalmas elemeket.

a kezdeti: A tulajdonságot az alapértelmezett értékre állítja. Ez egyenértékű 0 0 auto .

örököl: A tulajdonságot a szülőelemétől örökli.

Példa

Ebben a példában három tároló található, amelyek mindegyikében három rugalmas elem található. A szélesség és a konténerek magassága 300 képpont és 100 képpont .

Alkalmazzuk a flex: 1; az első konténer rugalmas elemeire, flex: 0 50px; a második konténer flex-elemeihez, és flex: 2 2; a harmadik konténer flex-elemeihez.

 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> 

Kimenet