Flexbox Layout: Slik distribuerer du barneelementer jevnt

Flexbox er et kraftig layout-modul i CSS som hjelper deg med å utnytte tilgjengelig plass innenfor en beholder effektivt. I denne veiledningen vil du lære hvordan du jevnt fordeler barneelementer i en Flex-beholder. Dette er spesielt nyttig for responsive design, der bredden på vinduet kan endre seg. La oss komme i gang!

Viktigste funn

• Med Flexbox kan du jevnt fordele barneelementer i layoutet ved å justere flex-verdiene til elementene.
• Du kan fleksibelt tilpasse bredden og høyden til barneelementene, slik at de automatisk tilpasser seg tilgjengelig plass, uten å måtte bruke faste mål.

Trinn-for-trinn veiledning

For å forstå hvordan du jevnt kan fordele barneelementer i en Flex-beholder, følg disse trinnene:

Først oppretter du en Flex-beholder ved å bruke CSS-egenskapen display: flex;. Her er et enkelt eksempel på hvordan du kan gjøre dette. Sørg for at beholderen er justert i rad-format:

I denne tilstanden blir plassen jevnt fordelt på alle barneelementer så lenge disse barneelementene ikke har faste bredde. Hvis du angir bredden på barneelementene og deretter setter dem til 100 piksler, vil de bli jevnt fordelt i beholderen, men dette er ikke optimalt for responsivt design:

Hvis du fjerner de faste breddene, vil du raskt se at plassen reduseres dramatisk, spesielt når teksten ikke er til stede i barneelementene. I dette tilfellet kollapser alt til minimumsbredden definert av teksten:

For å jevnt fordele tilgjengelig plass, må du sette flex-verdien for barneelementene. Dette gjøres enkelt ved å bruke flex-egenskapen som lar deg definere en proporsjonal del av den tilgjengelige plassen. Sett flex-verdien til hvert barneelement til 1:

Når du har gjort dette, vil du se at alle barneelementene har jevnt fordelt plassen. Dette er en veldig fleksibel løsning, da den dynamisk tilpasser seg beholderens bredde:

Du kan også variere flex-verdiene for å skape ulike andeler. For eksempel, hvis det første elementet skal få halvparten av plassen, kan du sette det til flex: 2;, mens de andre elementene beholder flex: 1;:

Når du har justert verdiene, vil barnelementene fordeles i henhold til de angitte verdiene. Gjennom de fleksible andelene du har tildelt, får det første elementet mer plass enn de andre:

Når du endrer beholderens bredde, forblir proporsjonene stabile. Enten du endrer bredden til 800 piksler eller 400 piksler, vil barnelementene automatisk tilpasse seg og jevnt fordele plassen basert på de tidligere angitte flex-verdiene:

Du kan også enkelt justere Flexbox-egenskapene ved å endre flex-retningsegenskapen. Hvis du for eksempel endrer Flex-beholderen fra rad til kolonne, vil fordelingslogikken forbli den samme. Barneelementene vil da bli ordnet vertikalt:

Sørg for at høyden på barneelementene ikke er satt fast for å bevare fleksibiliteten. Dette fungerer spesielt godt for responsive design, da barneelementene tilpasser seg skjermstørrelse og -orientering:

På denne måten kan du lage et sterkt responsivt layout, som sikrer at designet ditt ser utmerket ut både på skrivebord og mobilvisning.

Oppsummering

I denne opplæringen har du lært hvordan du bruker Flexbox i CSS og HTML for å jevnt fordele barneelementer. Takket være Flex-egenskapene kan du lage responsive oppsett som tilpasser seg sømløst til ulike skjermstørrelser og formater.