CSS:n flex-ominaisuus on lyhenne sanalle flex-grow, flex-shrink, ja flex-pohjainen . Se toimii vain joustavissa tuotteissa, joten jos säiliön tuote ei ole joustotuote, flex ominaisuus ei vaikuta vastaavaan tuotteeseen.

Tätä ominaisuutta käytetään joustavien kohteiden pituuden asettamiseen. Lapsielementtien ja pääsäilön sijoittaminen on helppoa tämän CSS-ominaisuuden avulla. Sitä käytetään määrittämään, kuinka joustava esine kutistuu tai kasvaa sopimaan tilaan.

The flex ominaisuus voidaan määrittää yhdellä, kahdella tai kolmella arvolla.

• Kun käytössä on yksiarvoinen syntaksi, arvon on oltava joko numero tai avainsanoja, kuten ei mitään, auto, tai alkukirjain .
• Kun käytössä on kaksiarvoinen syntaksi, ensimmäisen arvon on oltava numero (käytetään nimellä flex-grow ), toinen arvo voi olla joko numero (käytetään joustava-kutistuva ) tai kelvollinen leveysarvo (käytetään nimellä flex-pohjainen ).
• Kun käytössä on kolmiarvoinen syntaksi, arvojen on noudatettava seuraavaa järjestystä: a määrä varten flex-grow, a määrä varten joustava kutistuva, ja pätevä leveys arvoa varten flex-pohjainen .

Syntaksi

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

Kiinteistöjen arvot

flex-grow: Se on positiivinen yksikkötön luku, joka määrittää joustavan kasvutekijän. Se määrittää, kuinka paljon tuote kasvaa verrattuna muihin joustaviin tuotteisiin. Negatiiviset arvot eivät ole sallittuja. Jos se jätetään pois, se asettuu arvoon 1 .

joustokutistuva: Se on positiivinen yksikkötön luku, joka määrittää joustokutistumistekijän. Se määrittää, kuinka paljon tuote kutistuu verrattuna muihin joustaviin tuotteisiin. Negatiiviset arvot eivät ole sallittuja. Jos se jätetään pois, se asettuu arvoon 1 .

flex-pohjainen: Se on pituus suhteellisissa tai absoluuttisissa yksiköissä, joka määrittää joustavan kohteen alkuperäisen pituuden. Sitä käytetään joustavan tuotteen pituuden asettamiseen. Sen arvot voivat olla auto, inherit, tai numero, jota seuraa pituusyksiköt, kuten em, px, jne. Negatiiviset arvot eivät ole sallittuja. Jos se jätetään pois, se asettuu arvoon 0 .

auto: Tämä jousto-ominaisuuden arvo on yhtä suuri kuin 11 auto .

ei mitään: Tämä jousto-ominaisuuden arvo on yhtä suuri kuin 0 0 auto . Se ei kasvata eikä pienennä joustavia esineitä.

alkukirjain: Se asettaa ominaisuuden oletusarvoonsa. Se vastaa 0 0 auto .

inherit: Se perii ominaisuuden emoelementistään.

Esimerkki

Tässä esimerkissä on kolme säiliötä, joista jokaisessa on kolme joustavaa tuotetta. The leveys ja konttien korkeus ovat 300 pikseliä ja 100 pikseliä .

Sovellamme flex: 1; ensimmäisen kontin jousto-osille, flex: 0 50px; toisen säiliön jousto-osille ja flex: 2 2; kolmannen kontin jousto-osille.

 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> 

Lähtö