Flex gebruiken om HTML-elementen uit te lijnen

Met de flex-eigenschappen in CSS kunt u items flexibeler en responsiever uitlijnen. Dit maakt het handig wanneer u wilt dat uw HTML-elementen responsiever zijn in de webbrowser.

In dit artikel wordt uitgelegd hoe u bepaalde flex-eigenschappen kunt gebruiken. Dit omvat de eigenschappen flex-richting, uitvullen-inhoud, uitlijnen-zelf, uitlijnen-items, uitlijnen-inhoud en tussenruimte.

Hoe CSS Flex-weergave in te stellen

Een voorbeeldstructuur die u kunt gebruiken om te verkennen de basis van flexbox is een set onderliggende div's onder een enkele bovenliggende div. In de onderstaande code is er een hoofd "ouder" div. De drie onderliggende div's vertegenwoordigen items die u kunt uitlijnen met flex-eigenschappen.

Om elke flex-styling te laten werken, moet u de. toevoegen weergave: flex eigenschap toe aan de bovenliggende flexcontainer.

.ouder {
 weergave: flexibel;
}

Zonder flex worden de onderliggende div's de een na de ander weergegeven in een kolomformatie onderaan de pagina.

Om een ​​voorbeeld van deze opstelling te bekijken, bekijk en voer je de code hierin uit CodePen-fragment.

Lay-outrichting regelen

De flex-richting eigenschap bepaalt de rij- of kolomrichting van de onderliggende items.

Opties voor de eigenschap flex-direction zijn onder meer:

flex-richting: rij | kolom | rij-omgekeerd | omgekeerde kolom

U moet een bovenliggende container toevoegen rond de items die u wilt uitlijnen.

HTML:

CSS:

.red { achtergrondkleur: rood; }
.orange { achtergrondkleur: oranje; }
.geel { achtergrondkleur: geel; }
.groen { achtergrondkleur: groen;}
.blue { achtergrondkleur: blauw; }
.paars { achtergrondkleur: paars; }
.ouder div {
 breedte: 40px;
 hoogte: 40px;
}

Pas de eigenschap flex-direction toe op de bovenliggende flexcontainer. Hiermee worden de onderliggende div-items uitgelijnd.

.ouder {
 breedte: 300px;
 weergave: flexibel; 
 flex-richting: rij;
}

Veel flexeigenschappen verwijzen naar het concept van de hoofdas en de dwarsas. Wanneer flex-richting is rij, de hoofdas vertegenwoordigt de horizontale richting en de dwarsas vertegenwoordigt de verticale. Een waarde van kolom schakelt deze assen.

Bekijk hierin de code voor de eigenschap flex-direction CodePen-fragment enkele voorbeelden te zien.

Items langs de dwarsas uitlijnen

De align-items eigenschap bepaalt de uitlijning van items langs de dwarsas. Voor de standaard flex-richting regelt row, align-items de verticale uitlijning van de items.

Opties voor de eigenschap align-items zijn onder meer:

align-items: flex-start | flex-end | align-items | rekken

Voeg de eigenschap align-items toe aan de bovenliggende container om de onderliggende uit te lijnen.

.ouder {
 weergave: flexibel; 
 align-items: flex-start;
}

Bovendien kunt u ervoor kiezen om de items uit te lijnen met behulp van een basislijn. Standaard lijnt de basislijnoptie alle items uit op basis van de basis van de items.

U kunt ook kiezen waar de basislijn begint, zoals de bovenkant (eerste basislijn) of de onderkant (laatste basislijn).

align-items: baseline | eerste basislijn | laatste basislijn;

Voor align-items: baseline to work, zorg ervoor dat elk item een ​​andere hoogte of breedte heeft (afhankelijk van de as die je gebruikt).

​​​

Bekijk de code voor de eigenschap align-items hierin CodePen-fragment enkele voorbeelden te zien.

Uitlijning op afzonderlijke items overschrijven

U kunt de uitlijnen-zelf eigenschap om de stijl van align-items van de bovenliggende container te overschrijven. Dit betekent dat u een afzonderlijke flexuitlijning op een afzonderlijk artikel kunt instellen.

Opties voor de eigenschap align-self zijn onder meer:

align-self: auto | flex-start | flex-end | centrum | basislijn | rekken

Stel bijvoorbeeld dat de bovenliggende container een flex-direction-styling heeft die is ingesteld op "rij".

.ouder {
 weergave: flexibel; 
 flex-richting: rij;
}

U kunt de eigenschap align-self toepassen op het individuele item. Het individuele item gebruikt de stijl van de eigenschap align-self en centreert het item over de bovenliggende container.

Bekijk hierin de code voor de align-self eigenschap CodePen-fragment enkele voorbeelden te zien.

Hoe lijnen over de dwarsas te verdelen

De align-content eigenschap lijnt kinderen uit langs de verticale as. Het kan ook de afstand bepalen tussen items die op meerdere regels staan.

Opties voor de eigenschap align-content zijn onder meer:

align-content: flex-start | flex-end | centrum | uitrekken | spatie tussen | ruimte rondom

Voeg de eigenschap align-content toe aan de bovenliggende flexcontainer. De eigenschap align-content werkt alleen als de eigenschap flex-wrap is ingesteld. Voeg flex-wrap toe: wikkel naar de bovenliggende container en verklein de breedte van de bovenliggende div om de items op meer dan één regel te forceren.

.ouder {
 flexomslag: omslag;
 weergave: flexibel;
 align-content: flex-start;
 breedte: 180px;
}

Bekijk de code voor de eigenschap align-content hierin CodePen-fragment enkele voorbeelden te zien.

Items op de hoofdas uitlijnen

De rechtvaardigen-inhoud eigenschap voegt rechts, links of gecentreerde uitlijning toe aan de onderliggende items. Het spreidt de items ook uit door spaties ertussen toe te voegen bij het rechtvaardigen van inhoud.

Opties voor de eigenschap 'just-content' zijn onder meer:

rechtvaardigen-inhoud: flex-start | flex-end | centrum | spatie tussen | ruimte-rond | ruimte-gelijkmatig

Wikkel de items die u wilt uitlijnen onder een bovenliggende flexcontainer.

HTML:

CSS:

.red { achtergrondkleur: rood; }
.green { achtergrondkleur: lichtgroen; }
.blue { achtergrondkleur: blauw; }

Voeg de eigenschap 'just-content' toe aan de bovenliggende flex-container.

.ouder {
 breedte: 300px;
 weergave: flexibel; 
 rechtvaardigen-inhoud: flex-start;
}

De eigenschap just-content ondersteunt ook waarden die worden vermeld in de CSS Box Alignment-specificatie. Dit omvat waarden zoals "start", "end", "links" en "rechts". Sommige browsers ondersteunen deze niet.

De eigenschap rechtvaardigen-inhoud heeft ook een "veilig" trefwoord dat u kunt gebruiken. Dit zorgt ervoor dat de elementen binnen het bereik van de bovenliggende container proberen te blijven.

Het wordt ook gebruikt om gegevensverlies te voorkomen, in het geval dat u een lang woord centreert. Het gebruik van het safe-sleutelwoord voorkomt dat een kortere div de eerste en laatste letters afsnijdt.

.ouder {
 weergave: flexibel; 
 rechtvaardigen-inhoud: veilig centrum;
}

Het safe-sleutelwoord is ook beperkt tot bepaalde browsers. U kunt de compatibiliteit controleren op: Kan ik gebruiken.

Bekijk de code voor de eigenschap just-content hierin CodePen-fragment enkele voorbeelden te zien.

Afstand tussen items toevoegen

De gat eigenschap kunt u een hoeveelheid ruimte tussen items toevoegen. Het is een van de nieuwere CSS-functies die u kunnen helpen bij het bouwen van een responsieve lay-out.

Pas de eigenschap gap toe op de bovenliggende flexcontainer.

.ouder {
 weergave: flexibel;
 tussenruimte: 70px;
}

Als u een opening toevoegt die ervoor zorgt dat de lengte van de items de breedte van het bovenliggende item overschrijdt, zullen de items kleiner worden om te proberen binnen de rij te passen.

.ouder { 
 breedte: 300px;
 tussenruimte: 120px;
}

Als u flex-wrap: wrap gebruikt om de items naar een nieuwe regel te duwen, is de opening ook van toepassing op de ruimte tussen de rijen.

.ouder { 
 breedte: 300px;
 flexomslag: omslag;
 tussenruimte: 120px;
}

Daarnaast kunt u ook de rij-gap en kolom-gap eigenschappen. Nogmaals, u moet deze toepassen op de bovenliggende flexcontainer.

De eigenschap row-gap bepaalt de ruimte tussen elke rij. De eigenschap column-gap bepaalt de ruimte tussen elke kolom.

.ouder { 
 rij-gap: 120px; 
}
.ouder { 
 kolomopening: 120px; 
}

Bekijk hierin de code voor de gap eigenschap CodePen-fragment enkele voorbeelden te zien.

Meer flexibele eigenschappen op uw website gebruiken

Hopelijk bent u nu bekend met de verschillende flex-eigenschappen die u kunt gebruiken om items op uw webpagina uit te lijnen. Dit omvat hoe u de eigenschappen flex-richting, inhoud uitvullen, uitlijnen zelf, uitlijnen-items, inhoud uitlijnen en tussenruimte kunt gebruiken.

Flexbox is een krachtige lay-outtechniek, maar het is slechts een klein onderdeel van CSS. U kunt ook meer te weten komen over nieuwe CSS-eigenschappen, schone coderingstechnieken en tools die worden gebruikt voor CSS-optimalisatie.

11 Handige hulpmiddelen om CSS-bestanden te controleren, op te schonen en te optimaliseren

Lees volgende

Over de auteur