Kas yra CSS Flexbox?
CSS Flexbox (Flexible Box Layout) yra vienmatis išdėstymo modelis, skirtas erdvei paskirstyti ir elementams lygiuoti eilutėje arba stulpelyje. Flex konteineris apibrėžiamas naudojant display: flex, o jo tiesioginiai vaikai tampa flex elementais. Pagrindinės konteinerio savybės: flex-direction (eilutė arba stulpelis), flex-wrap (viena vs. kelios eilutės), justify-content (pagrindinio ašies lygiavimas), align-items (skersinio ašies lygiavimas kiekvienai eilutei) ir align-content (kelių eilučių skersinio ašies lygiavimas). Pagrindinės elemento savybės: flex-grow (kiek elementas auga), flex-shrink (kiek jis mažėja), flex-basis (pradinis dydis) ir align-self (perrašo konteinerio align-items konkrečiam elementui). Flexbox idealiai tinka naršymo juostoms, kortelių eilutėms, centruotiems išdėstymams ir bet kokiai vienmačiai tvarkai.
Kaip naudoti CSS Flexbox Generatorių
-
Koreguokite konteinerio savybes (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) naudodami išskleidžiamuosius meniu ir įvesties lauką.
-
Peržiūros srityje spustelėkite bet kurį elementą, kad jį pasirinktumėte (tampa oranžinis).
-
Elemento skydelyje nustatykite pasirinkto elemento flex-grow, flex-shrink, flex-basis ir align-self.
-
Spustelėkite '+ Pridėti elementą', kad pridėtumėte daugiau elementų; spustelėkite 'Pašalinti', kad ištrintumėte pasirinktą elementą.
-
Perjunkite tarp CSS ir HTML skirtukų, kad pamatytumėte sugeneruotą kodą, tada spustelėkite Kopijuoti.
-
Spustelėkite 'Iš naujo nustatyti viską', kad pradėtumėte iš naujo su numatytuoju 3 elementų išdėstymu.