CSS ypatybė „flex“ yra santrumpa lanksti-augti, lanksti-susitraukti, ir lankstumo pagrindu. Jis veikia tik su lanksčiais elementais, todėl jei konteinerio elementas nėra lankstus elementas, lankstus nuosavybė neturės įtakos atitinkamai prekei.

Ši savybė naudojama lanksčių elementų ilgiui nustatyti. Naudojant šią CSS nuosavybę lengva nustatyti antrinių elementų ir pagrindinio konteinerio padėtį. Jis naudojamas norint nustatyti, kaip lankstus daiktas susitrauks arba augs, kad tilptų į erdvę.

The lankstus savybę galima nurodyti viena, dviem arba trimis reikšmėmis.

• Kai yra vienos reikšmės sintaksė, reikšmė turi būti skaičius arba raktiniai žodžiai, pvz., jokio, auto, arba pradinė .
• Kai yra dviejų reikšmių sintaksė, pirmoji reikšmė turi būti skaičius (naudojamas kaip lankstus augimas ), antroji reikšmė gali būti skaičius (naudojamas lankstus-susitraukiantis ) arba galiojanti pločio reikšmė (naudojama kaip lankstus pagrindas ).
• Kai yra trijų reikšmių sintaksė, reikšmės turi sekti tokia tvarka: a numerį už lankstus augimas, a numerį už lankstus susitraukimas, ir galiojantis plotis vertė už lankstus pagrindas .

Sintaksė

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

Turto vertės

lankstus augimas: Tai teigiamas skaičius be vienetų, kuris lemia lankstumo augimo faktorių. Nurodoma, kiek prekė padidės, palyginti su kitomis lanksčiomis prekėmis. Neigiamos reikšmės neleidžiamos. Jei jis praleistas, tada nustatoma reikšmė 1 .

lankstus susitraukimas: Tai yra teigiamas skaičius be vienetų, kuris lemia lankstumo susitraukimo koeficientą. Nurodoma, kiek prekė susitrauks, palyginti su kitomis lanksčiomis prekėmis. Neigiamos reikšmės neleidžiamos. Jei jis praleistas, tada nustatoma reikšmė 1 .

lankstus pagrindas: Tai ilgis santykiniais arba absoliučiais vienetais, apibrėžiantis pradinį lankstaus elemento ilgį. Jis naudojamas lankstaus elemento ilgiui nustatyti. Jos vertybės gali būti automobilis, paveldėjimas, arba skaičius, po kurio nurodomi ilgio vienetai, pvz., em, px, ir tt Neigiamos reikšmės neleidžiamos. Jei jis praleistas, tada nustatoma reikšmė 0 .

automatinis: Ši lankstumo savybės vertė lygi 11 auto .

nė vienas: Ši lankstumo savybės vertė lygi 0 0 auto . Jis nei didina, nei nesumažina lanksčių daiktų.

inicialas: Ji nustato ypatybę į numatytąją vertę. Tai lygiavertis 0 0 auto .

paveldėti: Jis paveldi nuosavybę iš pirminio elemento.

Pavyzdys

Šiame pavyzdyje yra trys talpyklos, kurių kiekviename yra trys lankstūs elementai. The plotis ir konteinerių aukštis 300 piks ir 100 piks .

Mes taikome lankstus: 1; į pirmojo konteinerio lanksčiuosius elementus, lankstus: 0 50 taškų; į antrojo konteinerio lanksčiuosius elementus ir lankstus: 2 2; į trečiojo konteinerio lanksčiuosius elementus.

 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> 

Išvestis