Sådan bruges Flex til at justere HTML-elementer

Flex-egenskaberne i CSS giver dig mulighed for at justere elementer mere fleksibelt og responsivt. Dette gør det nyttigt, når du ønsker, at dine HTML-elementer skal være mere responsive i webbrowseren.

Denne artikel vil gennemgå, hvordan du kan bruge visse flex-egenskaber. Dette inkluderer egenskaberne flex-direction, justify-content, align-self, align-items, align-content og gap.

Sådan opsætter du CSS Flex Display

Et eksempel på struktur, som du kan bruge til at udforske det grundlæggende i flexbox er et sæt underordnede divs under en enkelt forælder div. I koden nedenfor er der en hoved "forælder" div. De tre underordnede divs repræsenterer elementer, som du kan justere ved hjælp af flex-egenskaber.

For at enhver flex styling skal fungere, skal du tilføje display: flex ejendom til den overordnede flexcontainer.

.parent {
 display: flex;
}

Uden flex vises de underordnede divs den ene efter den anden i en kolonneformation nede på siden.

For at se et eksempel på denne opsætning, se og kør koden i denne CodePen-uddrag.

Sådan styrer du layoutretning

Det flex-retning egenskab bestemmer række- eller kolonneretningen for de underordnede elementer.

Valgmuligheder for flex-direction-egenskaben omfatter:

flex-retning: række | kolonne | række-omvendt | kolonne-omvendt

Du skal tilføje en overordnet beholder, der omgiver de elementer, du gerne vil justere.

HTML:

CSS:

.red { baggrundsfarve: rød; }
.orange { baggrundsfarve: orange; }
.yellow { baggrundsfarve: gul; }
.green { baggrundsfarve: grøn;}
.blue { baggrundsfarve: blå; }
.purple { baggrundsfarve: lilla; }
.parent div {
 bredde: 40px;
 højde: 40px;
}

Anvend flex-direction-egenskaben på den overordnede flex-beholder. Dette vil justere de underordnede div-elementer.

.parent {
 bredde: 300px;
 display: flex; 
 flex-retning: række;
}

Mange flexegenskaber refererer til begrebet hovedakse og tværakse. Når flex-retning er række, hovedaksen repræsenterer den vandrette retning, og tværaksen repræsenterer den lodrette. En værdi af kolonne skifter disse akser.

Se koden for flex-direction-egenskaben i denne CodePen-uddrag for at se nogle eksempler.

Sådan justeres emner langs tværaksen

Det align-elementer egenskab styrer justeringen af ​​elementer langs tværaksen. For standard flex-retning, styrer række, align-items den lodrette justering af emnerne.

Indstillinger for egenskaben align-items omfatter:

align-items: flex-start | flex-ende | align-items | strække

Tilføj egenskaben align-items til den overordnede container for at justere dens underordnede.

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

Derudover kan du vælge at justere elementerne ved hjælp af en basislinje. Som standard justerer basislinjeindstillingen alle elementer baseret på bunden af ​​elementerne.

Du kan også vælge, hvor basislinjen starter fra, såsom top (første basislinje) eller bund (sidste basislinje).

align-items: baseline | første baseline | sidste baseline;

For align-emner: baseline for at arbejde, sørg for, at hvert element har en forskellig højde eller bredde (afhængigt af den akse, du bruger).

​​​

Se koden for egenskaben align-items i denne CodePen-uddrag for at se nogle eksempler.

Sådan tilsidesætter du justering på individuelle elementer

Du kan bruge align-selv egenskab for at tilsidesætte enhver stil med align-items i den overordnede container. Det betyder, at du kan indstille en separat flex justering på et individuelt emne.

Valgmuligheder for egenskaben align-self inkluderer:

align-self: auto | flex-start | flex-ende | center | baseline | strække

Sig for eksempel, at den overordnede container har en flex-direction styling indstillet til "row".

.parent {
 display: flex; 
 flex-retning: række;
}

Du kan anvende egenskaben align-self på det enkelte element. Det individuelle element vil bruge stilen af ​​egenskaben align-self og vil centrere elementet på tværs af den overordnede container.

Se koden for egenskaben align-self i denne CodePen-uddrag for at se nogle eksempler.

Sådan fordeles linjer på tværs af tværaksen

Det align-indhold egenskab justerer børn langs den lodrette akse. Det kan også bestemme afstanden mellem elementer, der er på flere linjer.

Valgmuligheder for egenskaben align-content omfatter:

align-content: flex-start | flex-ende | center | strække | mellemrum | plads-omkring

Tilføj egenskaben align-content til den overordnede flex-beholder. Egenskaben align-content fungerer kun, hvis flex-wrap-egenskaben er indstillet. Tilføj flex-wrap: pak ind i den overordnede beholder, og reducer bredden af ​​den overordnede div for at tvinge emnerne på mere end én linje.

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

Se koden for egenskaben align-content i denne CodePen-uddrag for at se nogle eksempler.

Sådan justeres emner på hovedaksen

Det retfærdiggøre-indhold egenskab tilføjer højre-, venstre- eller centerjustering til de underordnede elementer. Det spreder også elementerne ud ved at tilføje mellemrum mellem dem, når indholdet skal retfærdiggøres.

Valgmuligheder for egenskaben Justify-content omfatter:

retfærdiggøre-indhold: flex-start | flex-ende | center | mellemrum | rum-omkring | plads-jævnt

Pak de emner, du vil justere, under en overordnet flex-beholder.

HTML:

CSS:

.red { baggrundsfarve: rød; }
.grøn { baggrundsfarve: lysegrøn; }
.blue { baggrundsfarve: blå; }

Tilføj egenskaben justify-content til den overordnede flex-beholder.

.parent {
 bredde: 300px;
 display: flex; 
 retfærdiggøre-indhold: flex-start;
}

Egenskaben justify-content understøtter også værdier, der er angivet i CSS Box Alignment-specifikationen. Dette inkluderer værdier som "start", "slut", "venstre" og "højre". Nogle browsere understøtter ikke disse.

Egenskaben justify-content har også et "sikkert" søgeord, som du kan bruge. Dette sikrer, at elementerne forsøger at holde sig inden for rækkevidden af ​​den overordnede container.

Det bruges også til at forhindre tab af data, hvis du centrerer et langt ord. Brug af det sikre nøgleord forhindrer en kortere div i at afskære det første og sidste bogstav.

.parent {
 display: flex; 
 retfærdiggøre-indhold: sikkert center;
}

Det sikre søgeord er også begrænset til visse browsere. Du kan tjekke kompatibilitet på Kan jeg bruge.

Se koden for justify-content-egenskaben i denne CodePen-uddrag for at se nogle eksempler.

Sådan tilføjes mellemrum mellem elementer

Det hul egenskab giver dig mulighed for at tilføje en mængde mellemrum mellem elementer. Det er en af nyere CSS-funktioner, der kan hjælpe dig med at opbygge et responsivt layout.

Anvend gap-egenskaben på den overordnede flex-beholder.

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

Hvis du tilføjer et mellemrum, der tvinger længden af ​​emnerne til at overstige bredden af ​​det overordnede, vil emnerne krympe for at prøve at passe ind i rækken.

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

Hvis du bruger flex-wrap: wrap for at skubbe emnerne til en ny linje, vil mellemrummet også gælde for mellemrummet mellem rækkerne.

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

Derudover kan du også indstille række-gab og kolonne-gab ejendomme. Igen skal du anvende disse på den overordnede flex-beholder.

Egenskaben række-gap bestemmer afstanden mellem hver række. Egenskaben kolonne-gap bestemmer mellemrummet mellem hver kolonne.

.parent { 
 række-gab: 120px; 
}
.parent { 
 kolonne-gab: 120px; 
}

Se koden for gap-egenskaben i denne CodePen-uddrag for at se nogle eksempler.

Brug af flere Flex-egenskaber på dit websted

Forhåbentlig er du nu bekendt med de forskellige flex-egenskaber, du kan bruge til at justere elementer på din webside. Dette inkluderer, hvordan du kan bruge egenskaberne flex-direction, justify-content, align-self, align-items, align-content og gap.

Flexbox er en kraftfuld layoutteknik, men det er kun en lille del af CSS. Du kan også lære om nye CSS-egenskaber, rene kodningsteknikker og værktøjer, der bruges til CSS-optimering.

11 Nyttige værktøjer til at kontrollere, rense og optimere CSS-filer

Læs Næste

Om forfatteren