Slik bruker du Flex for å justere HTML-elementer

Fleksiegenskapene i CSS lar deg justere elementer mer fleksibelt og responsivt. Dette gjør det nyttig når du vil at HTML-elementene dine skal være mer responsive i nettleseren.

Denne artikkelen vil gå gjennom hvordan du kan bruke visse flexegenskaper. Dette inkluderer egenskapene flex-direction, justify-content, align-self, align-items, align-content og gap.

Hvordan sette opp CSS Flex Display

Et eksempel på struktur som du kan bruke til å utforske det grunnleggende om flexbox er et sett med underordnede div. under en enslig overordnet div. I koden nedenfor er det en hoved "foreldre" div. De tre underordnede divene representerer elementer som du kan justere ved hjelp av flexegenskaper.

For at enhver fleksibel styling skal fungere, må du legge til display: flex eiendom til den overordnede flex-beholderen.

.parent {
 display: flex;
}

Uten flex vises barnedivene etter hverandre i en kolonneformasjon nedover på siden.

For å se et eksempel på dette oppsettet, se og kjør koden i denne CodePen-kodebit.

Hvordan kontrollere layoutretningen

De flex-retning egenskap bestemmer rad- eller kolonneretningen til de underordnede elementene.

Alternativer for flex-direction-egenskapen inkluderer:

flex-retning: rad | kolonne | rad-omvendt | kolonne-revers

Du må legge til en overordnet beholder rundt elementene du vil justere.

HTML:

CSS:

.red { bakgrunnsfarge: rød; }
.orange { bakgrunnsfarge: oransje; }
.yellow { bakgrunnsfarge: gul; }
.green { bakgrunnsfarge: grønn;}
.blue { bakgrunnsfarge: blå; }
.purple { bakgrunnsfarge: lilla; }
.parent div {
 bredde: 40px;
 høyde: 40px;
}

Bruk flex-direction-egenskapen på den overordnede flex-beholderen. Dette vil justere de underordnede div-elementene.

.parent {
 bredde: 300px;
 display: flex; 
 flex-retning: rad;
}

Mange fleksegenskaper refererer til konseptet hovedakse og tverrakse. Når flex-retning er rad, hovedaksen representerer den horisontale retningen, og tverraksen representerer den vertikale. En verdi av kolonne bytter disse aksene.

Se koden for flex-direction-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Slik justerer du elementer langs kryssaksen

De align-elementer egenskap kontrollerer justeringen av elementer langs tverraksen. For standard flex-retning, kontrollerer rad, align-elementer den vertikale justeringen av elementene.

Alternativer for egenskapen align-items inkluderer:

align-items: flex-start | flex-end | align-items | tøye ut

Legg til egenskapen align-items til den overordnede beholderen for å justere underordnede.

.parent {
 display: flex; 
 align-items: flex-start;
}

I tillegg kan du velge å justere elementene ved hjelp av en grunnlinje. Som standard justerer grunnlinjealternativet alle elementer basert på bunnen av elementene.

Du kan også velge hvor grunnlinjen starter fra, for eksempel toppen (første grunnlinje) eller bunnen (siste grunnlinje).

align-items: baseline | første grunnlinje | siste baseline;

For align-elementer: grunnlinje for å fungere, sørg for at hvert element har forskjellig høyde eller bredde (avhengig av aksen du bruker).

​​​

Se koden for align-items-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Hvordan overstyre justering på individuelle elementer

Du kan bruke innrette seg selv egenskap for å overstyre eventuell stiling av align-elementer i den overordnede beholderen. Dette betyr at du kan sette en separat flex justering på et enkelt element.

Alternativer for align-self-egenskapen inkluderer:

align-self: auto | flex-start | flex-end | sentrum | grunnlinje | tøye ut

Si for eksempel at den overordnede beholderen har en flex-direction styling satt til "row".

.parent {
 display: flex; 
 flex-retning: rad;
}

Du kan bruke align-self-egenskapen på det individuelle elementet. Det individuelle elementet vil bruke stilen til align-self-egenskapen, og vil sentrere elementet på tvers av den overordnede beholderen.

Se koden for align-self-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Hvordan distribuere linjer over kryssaksen

De align-innhold egenskap justerer barn langs den vertikale aksen. Det kan også bestemme avstanden mellom elementer som er på flere linjer.

Alternativer for align-content-egenskapen inkluderer:

align-content: flex-start | flex-end | sentrum | strekke | mellomrom | plass rundt

Legg til egenskapen align-content i den overordnede flex-beholderen. Egenskapen align-content vil bare fungere hvis flex-wrap-egenskapen er angitt. Legg til flex-wrap: pakk inn i den overordnede beholderen, og reduser bredden på den overordnede div for å tvinge elementene på mer enn én linje.

.parent {
 flex-wrap: vikle;
 display: flex;
 align-content: flex-start;
 bredde: 180px;
}

Se koden for align-content-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Slik justerer du elementer på hovedaksen

De rettferdiggjøre-innhold egenskap legger til høyre-, venstre- eller senterjustering til de underordnede elementene. Den sprer også elementene ved å legge til mellomrom mellom dem når du rettferdiggjør innhold.

Alternativer for rettferdig innhold-egenskapen inkluderer:

justify-content: flex-start | flex-end | sentrum | mellomrom | plass-rundt | plass-jevnt

Pakk elementene du vil justere under en overordnet fleksibel beholder.

HTML:

CSS:

.red { bakgrunnsfarge: rød; }
.grønn { bakgrunnsfarge: lysgrønn; }
.blue { bakgrunnsfarge: blå; }

Legg til justify-content-egenskapen i den overordnede flex-beholderen.

.parent {
 bredde: 300px;
 display: flex; 
 rettferdiggjøre-innhold: flex-start;
}

Egenskapen justify-content støtter også verdier oppført i CSS Box Alignment-spesifikasjonen. Dette inkluderer verdier som "start", "slutt", "venstre" og "høyre". Noen nettlesere støtter ikke disse.

Egenskapen justify-content har også et "sikkert" nøkkelord som du kan bruke. Dette sikrer at elementene prøver å holde seg innenfor rekkevidden til den overordnede beholderen.

Den brukes også for å forhindre tap av data, i tilfelle du sentrerer et langt ord. Ved å bruke det sikre nøkkelordet forhindrer du at en kortere div klipper av første og siste bokstav.

.parent {
 display: flex; 
 rettferdiggjøre-innhold: trygt senter;
}

Det sikre nøkkelordet er også begrenset til visse nettlesere. Du kan sjekke kompatibilitet på Kan jeg bruke.

Se koden for justify-content-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Hvordan legge til mellomrom mellom elementer

De mellomrom egenskap lar deg legge til en mengde mellomrom mellom elementer. Det er en av nyere CSS-funksjoner som kan hjelpe deg med å bygge en responsiv layout.

Bruk gap-egenskapen på den overordnede flex-beholderen.

.parent {
 display: flex;
 gap: 70px;
}

Hvis du legger til et gap som tvinger lengden på elementene til å overskride bredden til overordnet, vil elementene krympe for å prøve å passe inn i raden.

.parent { 
 bredde: 300px;
 gap: 120px;
}

Hvis du bruker flex-wrap: wrap for å skyve elementene til en ny linje, vil gapet også gjelde for mellomrommet mellom radene.

.parent { 
 bredde: 300px;
 flex-wrap: vikle;
 gap: 120px;
}

I tillegg kan du også stille inn rad-gap og kolonne-gap egenskaper. Igjen, du må bruke disse på den overordnede flex-beholderen.

Radgap-egenskapen bestemmer mellomrommet mellom hver rad. Kolonne-gap-egenskapen bestemmer mellomrommet mellom hver kolonne.

.parent { 
 radavstand: 120px; 
}
.parent { 
 kolonne-gap: 120px; 
}

Se koden for gap-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Bruk av flere Flex-egenskaper på nettstedet ditt

Forhåpentligvis er du nå kjent med de ulike flex-egenskapene du kan bruke til å justere elementer på nettsiden din. Dette inkluderer hvordan du kan bruke egenskapene flex-direction, justify-content, align-self, align-items, align-content og gap.

Flexbox er en kraftig layoutteknikk, men det er bare en liten del av CSS. Du kan også lære om nye CSS-egenskaper, rene kodeteknikker og verktøy som brukes for CSS-optimalisering.

11 Nyttige verktøy for å sjekke, rense og optimalisere CSS-filer

Les Neste

Om forfatteren