Hvad er CSS Flexbox?
CSS Flexbox (Flexible Box Layout) er en endimensionel layoutmodel til fordeling af plads og justering af elementer i en række eller kolonne. Flex-containeren defineres med display: flex, og dens direkte børn bliver flex-elementer. Nøgle-containeregenskaber: flex-direction (række eller kolonne), flex-wrap (enkelt vs. flerlinje), justify-content (justeret langs hovedaksen), align-items (justeret langs tværaksen pr. linje) og align-content (justeret langs tværaksen for flere linjer). Nøgle-elementegenskaber: flex-grow (hvor meget et element vokser), flex-shrink (hvor meget det krymper), flex-basis (indledende størrelse) og align-self (tilsidesætter containerens align-items for et bestemt element). Flexbox er ideelt til navigationslinjer, kortrækker, centrerede layouts og enhver endimensionel arrangement.
Sådan bruges CSS Flexbox Generator
-
Juster containeregenskaberne (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ved hjælp af rullelister og inputfeltet.
-
Klik på et vilkårligt element i forhåndsvisningen for at vælge det (bliver orange).
-
Indstil det valgte elements flex-grow, flex-shrink, flex-basis og align-self i elementpanelet.
-
Klik på '+ Tilføj element' for at tilføje flere elementer; klik på 'Fjern' for at slette det valgte element.
-
Skift mellem CSS- og HTML-fanerne for at se den genererede kode, og klik derefter på Kopiér.
-
Klik på 'Nulstil alt' for at starte forfra med standard 3-element-layoutet.