Kaikki yleiset flexbox-ominaisuudet ryhmiteltynä sen mukaan, mihin niitä sovelletaan: säiliöön ja kohteeseen. Jokainen rivi yhdistää ominaisuuden, sen yleiset arvot ja sen tehtävän.
Flexbox asettelee elementit yhteen ulottuvuuteen: riviin tai sarakkeeseen. Aseta display: flex vanhemmalle, jolloin siitä tulee flex-säiliö; sen suorat lapset muuttuvat flex-kohteiksi. Säiliön ominaisuudet ohjaavat jakoa pääakselin ja poikittaisakselin varrella; kohteen ominaisuudet ohjaavat, kuinka yksittäinen kohde kasvaa, kutistuu tai asettuu. Valitse flexbox yksisuuntaisiin palkkeihin, riveihin ja keskittämiseen.
Viitetaulukko · 13 merkintää
CSS FlexboxExplained
13 of 13 rows
Säiliö
flex | inline-flex
Muuttaa elementin flex-säiliöksi.
row | column | row-reverse | column-reverse
Asettaa pääakselin, jonka varrella kohteet virtaavat.
flex-start | center | space-between | space-around | space-evenly
Jakaa kohteet pääakselin varrelle.
stretch | center | flex-start | flex-end | baseline
Asettaa kohteet poikittaisakselin varrelle.
flex-start | center | stretch | space-between
Asettaa rivittyneitä rivejä, kun poikittaisakselilla on ylimääräistä tilaa.
nowrap | wrap | wrap-reverse
Antaa kohteiden rivittyä uusille riveille kutistumisen sijaan.
0.5rem | 8px 16px
Väli kohteiden välillä vaaka- ja pystysuunnassa.
Kohde
0 | 1 | 2
Kuinka suuren osan vapaasta tilasta kohde ottaa suhteessa sisariinsa.
0 | 1
Kuinka paljon kohde kutistuu, kun tilaa ei ole tarpeeksi.