Flexboks i CSS: Forstå betydningen av Flex-Basis og Flex-retning

Flexbox er en kraftig layout-modul i CSS som lar deg lage fleksible og responsive layouter. I denne opplæringen fokuserer vi på flex-basis-egenskapen, som er ansvarlig for å definere grunnstørrelsen til et element i flex-retningen. Det er essensielt å angi størrelsen på barnelementene uavhengig av de konkrete dimensjonene til Flex-Containeren. Ved riktig bruk av flex-basis kan du betydelig forenkle og optimalisere layoutdesignet.

Viktigste funn

• flex-basis bestemmer elementets startstørrelse i retningen til Flex-Containeren.
• Standardverdien for flex-basis er 0%, noe som betyr at elementet bare tar opp plassen som innholdet krever.
• Ved hjelp av flex-grow og flex-shrink kan elementet tilpasse størrelsen sin basert på tilgjengelig plass.
• Flex-retningen påvirker tolkningen av basisstørrelsen.

Trinn-for-trinn veiledning

Først ser vi på hvordan flex-basis fungerer i et Flex-Layout. Begynn med et enkelt eksempel. Sørg for at du har satt opp en Flex-Container med elementer.

Først definerer du Flex-Containeren. I vårt eksempel har vi satt display: flex og flex-retning: rad på vår Container. Dette gjør at barnelementene kan bli horisontalt plassert ved siden av hverandre.

Neste steg er å velge et element innenfor Containeren og bruke flex-egenskapen. Her bruker vi flex: 1, som er en kombinasjon av flex-grow, flex-shrink og flex-basis. La oss se nærmere på de enkelte komponentene.

Med flex: 1 vil elementet ta imot fleksibel størrelse, der grunnstandardstørrelsen er satt til 0%. Dette betyr at det bare tar opp plassen som innholdet krever.

Nå ser vi nærmere på flex-basis-egenskapen. Du kan angi den direkte, for eksempel ved å starte med å endre den fra flex til flex-basis: 100px. Dette setter bredden på elementet til 100 piksler.

Lagre endringene og du vil se at hovedelementet nå er 100 piksler bredt. Disse 100 pikslene er utgangsbredden som nettleserlayoutet tar utgangspunkt i.

Dette betyr at elementet kan ta opp mer plass hvis det har mer plass til rådighet ved hjelp av flex-grow, eller mindre hvis flex-shrink aktiveres.

Du kan også angi prosenter. Endre verdien til flex-basis: 100%, som betyr at elementet skal ta opp all tilgjengelig plass i Containeren.

Hvis du nå setter flex-basis til 0, ser du at elementet kollapser til bredden som er definert av innholdet. Det er viktig å merke seg at 0 ikke betyr at elementet ikke har bredde, men det baserer seg bare på minimalt innhold.

En vanlig brukt verdi for flex-basis er auto. Når du setter denne verdien, blir layouten veldig fleksibel, siden bredden varierer avhengig av innholdet. Kontroller dette ved å sette bredden eksplisitt, for eksempel til 200px, og se hvordan elementet tar opp 200 piksler.

Du kan også endre Flex-retningen. Sett flex-retning til kolonne. Dette endrer måten basisstørrelsen tolkes på – nå gjelder basisstørrelsen i vertikal retning.

Hvis du nå endrer flex-basis, må du justere høyden på elementet. Hvis du setter flex-basis til 100 piksler, vil elementet være 100 piksler høyt, og du har fleksibiliteten til å skalere avhengig av innholdet.

Dette er viktig å forstå, fordi mens bredde og høyde er statiske, endrer flex-basis seg i samsvar med flex-retningen. Dette gjør Flexbox mye mer fleksibel sammenlignet med tradisjonelle layoutmetoder.

I tillegg vil betydningen av flex-grow og flex-shrink i forbindelse med flex-basis bli forklart som neste steg. Disse verdiene definerer hvor mye plass elementet tar opp i beholderen, avhengig av dets størrelse og tilgjengelige ressurser.

Oppsummering

I denne veiledningen har du lært grunnleggende om flex-basis egenskapen. Du vet nå hvordan du definerer størrelsen på et element ved hjelp av denne egenskapen, og hvordan flex-direction påvirker layoutvisningen. Med denne kunnskapen er du klar til å lage avanserte Flexbox-layouter som tilpasser seg fleksibelt til ulike skjermstørrelser og innhold.