CSS Flexbox-generator
CSS Flexbox er en layoutmodell utviklet for å distribuere plass og justere elementer i en container, selv når størrelsen på elementene er ukjent eller dynamisk. Modellen forenkler arbeidet med å lage fleksible grensesnitt, ettersom den håndterer justering langs to akser uten behov for tradisjonelle metoder som flyt-egenskaper (floats) eller absolutt posisjonering.
Med denne visuelle Flexbox-generatoren kan du konfigurere en flex-container og dens tilhørende elementer ved hjelp av grafiske kontroller. Du ser endringene umiddelbart i en live forhåndsvisning, og når du er fornøyd med resultatet, kan du kopiere den ferdige CSS-koden direkte til ditt eget prosjekt.
Slik fungerer aksene i Flexbox
For å forstå hvordan egenskapene i en flex-container samhandler, må man kjenne til konseptet med hovedakse (main axis) og tverrakse (cross axis).
Når du endrer retningen på containeren, påvirker dette direkte hvordan justeringsegenskapene fungerer:
- Hovedakse: Dette er aksen som elementene legges ut langs. Hvis retningen er satt til en rad, går hovedaksen horisontalt. Hvis retningen settes til en kolonne, går hovedaksen vertikalt.
- Tverrakse: Dette er aksen som går vinkelrett på hovedaksen. For rader går tverraksen vertikalt, og for kolonner går den horisontalt.
Når du bytter retning fra row til column, bytter hovedaksen og tverraksen plass. Dette betyr at egenskapen justify-content (som styrer hovedaksen) og align-items (som styrer tverraksen) endrer retningen de virker i.
Egenskaper for flex-containeren
Containeren er forelderelementet som definerer flex-konteksten for alle barneelementene. Generatoren lar deg justere følgende overordnede egenskaper:
| Egenskap | Beskrivelse | Tilgjengelige verdier i verktøyet |
|---|---|---|
| Retning (direction) | Bestemmer retningen elementene skal plasseres i, og definerer dermed hovedaksen. | Row, Row reverse, Column, Column reverse |
| Bryting (wrap) | Definerer om elementene skal tvinges inn på én enkelt linje, eller om de kan bryte over til flere linjer. | Ingen bryting, Wrap, Wrap reverse |
| Justify content | Justerer elementene langs hovedaksen og fordeler eventuell overflødig plass. | Start, End, Center, Space between, Space around, Space evenly |
| Align items | Definerer standard oppførsel for hvordan elementene justeres langs tverraksen på den gjeldende linjen. | Start, End, Center, Stretch, Baseline |
| Align content | Justerer linjene i en container langs tverraksen når det er ekstra plass og bryting er aktivert. | Start, End, Center, Stretch, Space between, Space around, Space evenly |
| Mellomrom (gap) | Angir størrelsen på avstanden mellom elementene, både horisontalt og vertikalt. | Numerisk verdi |
Når bryting er deaktivert (Ingen bryting), presses alle elementene sammen på én enkelt linje, selv om de til sammen er bredere enn containeren. Hvis du aktiverer Wrap, vil elementer som ikke får plass automatisk falle ned på neste linje. Det er i dette tilfellet, når du har flere linjer med elementer, at align-content trer i kraft for å styre avstanden mellom selve linjene.
Egenskaper for de enkelte elementene
I tillegg til å styre containeren som helhet, kan du konfigurere spesifikke egenskaper for hvert enkelt element i layouten. Når du klikker på Legg til element, opprettes et nytt element i forhåndsvisningen (for eksempel "Item 5").
Du kan justere følgende parametere for hvert element:
- Grow: En numerisk verdi som bestemmer hvor mye elementet skal vokse for å fylle gjenværende ledig plass i containeren i forhold til de andre elementene.
- Shrink: En numerisk verdi som bestemmer hvor mye elementet tillates å krympe dersom det ikke er nok plass i containeren.
- Basis: Definerer standard startstørrelse for elementet før eventuell ekstra plass fordeles. Kan settes til en numerisk verdi eller
Auto. - Rekkefølge (order): En numerisk verdi som endrer den visuelle rekkefølgen til elementet i layouten, uten at du trenger å endre rekkefølgen i HTML-koden.
- Align self: Lar deg overstyre den overordnede
align-items-verdien for akkurat dette elementet. Tilgjengelige valg erAuto,Start,End,Center,StretchogBaseline.
For å holde CSS-koden ren og oversiktlig, genererer verktøyet kun spesifikke CSS-regler for de elementene der du faktisk har endret standardverdiene.
Vanlige layoutmønstre med Flexbox
Flexbox egner seg spesielt godt til å løse klassiske layoututfordringer i webdesign. Generatoren inneholder forhåndsinnstillinger for flere kjente mønstre:
- Sentrert: Plasserer et element nøyaktig i midten av containeren, både horisontalt og vertikalt. Dette oppnås ved å sette både
justify-contentogalign-itemstilCenter. - Navigasjonslinje: Fordeler menyelementer horisontalt med jevnt mellomrom. Ofte brukes
Space betweenfor å skyve logoen til venstre og menyvalgene til høyre. - Stabel: Plasserer elementer vertikalt oppå hverandre ved å bruke
Columnsom retning, noe som er ideelt for skjemaer eller lister. - Kort: Organiserer innholdskort i et rutenett som bryter elegant over flere linjer ved hjelp av
Wrapog et definertMellomrom (gap). - Sidefelt: Oppretter en klassisk tospalters layout der hovedinnholdet og et sidefelt ligger ved siden av hverandre, med ulik vektfordeling via
Grow.
Personvern og lokal prosessering
Når du bruker denne generatoren, foregår all databehandling og rendering lokalt på din egen enhet. Layouten din bygges direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo. Dette betyr at du kan eksperimentere med strukturer og kode helt privat, uten at data sendes over nettverket.
Ofte stilte spørsmål (FAQ)
Hva er forskjellen på justify-content og align-items?
Justify-content fordeler elementene langs hovedaksen (main axis) — retningen raden eller kolonnen flyter — mens align-items plasserer dem på tvers av den andre aksen (cross axis). Hvis du bytter retning fra row til column, bytter de to aksene plass, slik at justify-content begynner å fungere ovenfra og ned, og align-items fra venstre til høyre.
Hvordan fungerer kontrollene for enkelt-elementer?
Velg et element etter nummer, og angi deretter hvor mye det skal vokse (grow) for å fylle ledig plass, krympe (shrink) når plassen er trang, dets startstørrelse (basis) og dets egen justering på tverraksen (align-self). Rekkefølge (order) flytter et element tidligere eller senere på skjermen uten å røre HTML-koden. Kun elementene du faktisk endrer får sin egen regel i CSS-koden.
Når har wrap og align-content noe å si?
Når bryting (wrapping) er av, tvinges alle elementer inn på én linje og kan presses sammen. Slår du det på, vil elementer som ikke lenger får plass, falle ned på neste linje — det er da align-content tar over og fordeler linjene som en gruppe. Gap setter avstanden mellom elementer og mellom linjer, helt uten marginer.