Hva er CSS Flexbox?
CSS Flexbox (Flexible Box Layout) er en endimensjonal layoutmodell for å fordele plass og justere elementer i en rad eller kolonne. Flex-beholderen defineres med display: flex, og de direkte barna blir flex-elementer. Viktige beholdergegenskaper: flex-direction (rad eller kolonne), flex-wrap (enkelt vs. flerlinjet), justify-content (justering langs hovedaksen), align-items (justering langs tverraksen per linje) og align-content (justering langs tverraksen av flere linjer). Viktige elementegenskaper: flex-grow (hvor mye et element vokser), flex-shrink (hvor mye det krymper), flex-basis (innledende størrelse) og align-self (overstyrer align-items i beholderen for et bestemt element). Flexbox er ideelt for navigasjonslinjer, kortrekker, sentrerte oppsett og enhver endimensjonal arrangement.
Slik bruker du CSS Flexbox Generator
-
Juster beholdergenskapene (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ved hjelp av rullegardinene og inndatafeltet.
-
Klikk på et element i forhåndsvisningen for å velge det (blir oransje).
-
Angi flex-grow, flex-shrink, flex-basis og align-self for det valgte elementet i elementpanelet.
-
Klikk på '+ Legg til element' for å legge til flere elementer; klikk på 'Fjern' for å slette det valgte elementet.
-
Bytt mellom CSS- og HTML-fanene for å se den genererte koden, og klikk deretter på Kopier.
-
Klikk på 'Tilbakestill alt' for å starte på nytt med standard 3-element-oppsett.