Flex rekvizīts CSS ir saīsinājums elastīgi augt, elastīgi sarauties, un elastīga bāze. Tas darbojas tikai uz elastīgiem vienumiem, tādēļ, ja konteinera vienums nav elastīgs vienums, flex īpašums neietekmēs atbilstošo preci.
Šis rekvizīts tiek izmantots, lai iestatītu elastīgu priekšmetu garumu. Pakārtoto elementu un galvenā konteinera pozicionēšana ir vienkārša, izmantojot šo CSS rekvizītu. To izmanto, lai iestatītu, kā elastīgs vienums saruks vai pieaugs, lai ietilptu telpā.
The flex rekvizītu var norādīt ar vienu, divām vai trim vērtībām.
- Ja ir vienas vērtības sintakse, vērtībai ir jābūt skaitlim vai atslēgvārdiem, piemēram, nav, auto, vai sākotnējā .
- Ja ir divu vērtību sintakse, pirmajai vērtībai ir jābūt skaitlim (izmanto kā flex-augt ), otrā vērtība var būt vai nu skaitlis (izmanto, lai elastīga saraušanās ) vai derīga platuma vērtība (izmantota kā flex-bāze ).
- Ja ir trīs vērtību sintakse, vērtībām ir jāatbilst secībai: a numuru priekš elastīga augšana, a numuru priekš elastīga saraušanās, un derīgs platums vērtība priekš flex-bāze .
Sintakse
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Īpašuma vērtības
flex-grow: Tas ir pozitīvs bezvienības skaitlis, kas nosaka elastības pieauguma faktoru. Tas norāda, cik daudz prece pieaugs salīdzinājumā ar citām elastīgajām precēm. Negatīvās vērtības nav atļautas. Ja tas tiek izlaists, tas tiek iestatīts uz vērtību 1 .
elastīga saraušanās: Tas ir pozitīvs bezvienības skaitlis, kas nosaka elastības saraušanās koeficientu. Tas norāda, cik daudz vienums saruks salīdzinājumā ar citiem elastīgajiem izstrādājumiem. Negatīvās vērtības nav atļautas. Ja tas tiek izlaists, tas tiek iestatīts uz vērtību 1 .
elastīga bāze: Tas ir garums relatīvās vai absolūtās vienībās, kas nosaka elastīgā elementa sākotnējo garumu. To izmanto, lai iestatītu elastīgā izstrādājuma garumu. Tās vērtības var būt auto, mantojums, vai skaitlis, kam seko garuma vienības, piemēram, em, px, utt. Negatīvās vērtības nav atļautas. Ja tas tiek izlaists, tas tiek iestatīts uz vērtību 0 .
auto: Šī flex rekvizīta vērtība ir līdzvērtīga 11 auto .
neviens: Šī flex rekvizīta vērtība ir līdzvērtīga 0 0 auto . Tas nedz palielina, nedz nesamazina elastīgos priekšmetus.
iniciālis: Tas iestata īpašuma noklusējuma vērtību. Tas ir līdzvērtīgs 0 0 auto .
mantot: Tas manto īpašumu no sava vecākelementa.
Piemērs
Šajā piemērā ir trīs konteineri, katrā ir trīs elastīgi vienumi. The platums un konteineru augstums ir 300 pikseļi un 100 pikseļi .
Mēs piemērojam flex: 1; uz pirmā konteinera elastīgajiem elementiem, elastīgums: 0 50 pikseļi; uz otrā konteinera elastīgajiem elementiem un flex: 2 2; uz trešā konteinera elastīgajiem elementiem.
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> Izmēģiniet to tagad Izvade
