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> Tesztelje most Kimenet
