De ongelooflijke kracht van FLEXBOX

Sep 12, 2025

Procedures

FlexBox, of de flexibele box-lay-out, is een krachtige CSS-lay-outmodule die webontwerpers en ontwikkelaars een efficiënte en eenvoudige manier geeft om elementen in een container te lijmen, uitlijnen en distribueren. Het lost veel lay-outproblemen op die we hebben gehad om lange tijd op te lossen.

FLEXBOX BASICS

In het meest elementaire formulier bestaat FlexBox uit twee elementen: een flexcontainer (of flexouder) en flex-items (Flex-kinderen). Een flex-container is een bevattend element (zoals een div ) Gezien het display-eigenschap buigen Flex-items zijn kinderelementen van een flexcontainer, die kan worden gemanipuleerd door verschillende display-eigenschappen.

Flex-containers en flex-items hebben elk hun eigen assortiment van eigenschappen die op verschillende manieren kunnen worden gecombineerd om een reeks complexe lay-outs te creëren. Items in een flexcontainer kunnen horizontaal of verticaal worden uitgelegd, op verschillende manieren uitgelijnd en verdeeld en uitgerekt of gekrompen om in de beschikbare ruimte te passen. Al deze opties kunt u eenvoudig responsieve lay-outs maken.

Hoe flexbox te gebruiken

Om FlexBox te gebruiken, moet u eerst uw flexcontainer maken (het ouderelement dat uw flex-items bevat). In dit voorbeeld gebruiken we een div blok. Voordat we het element stylen, laten we dan nog drie toevoegen div Blokken in onze flexcontainer om op te treden als de flex-items. Op dit punt worden de items gestapeld.

Met ons kind Divs op zijn plaats, kunnen we de weergave van de bovenliggende container instellen op buigen

 Flex-container {
Display: Flex;
}

Lay-out richtingen

De lay-outrichting is gewoon de richting die uw elementen zichzelf verspreidt. De standaardrichting van een flexcontainer is rij , dat de kinderelementen horizontaal weergeeft. U kunt de lay-out naar verticaal wisselen door de richting in te stellen kolom

 Flex-container {
Display: Flex;
Flex-richting: rij;


Flexcontainer {
Display: Flex;
Flex-richting: kolom;
}

Welke richting die u op uw flexcontainer instelt, wordt aangeduid als zijn 'hoofd' richting, terwijl de andere richting die u niet koos de richting 'kruis' wordt. Aldus zal de hoofdrichting standaard horizontaal zijn en zal de richting van de kruising verticaal zijn.

Flexbox laat je ook de lay-out omkeren. Wanneer omgekeerd, worden kinderen van een flexcontainer rechtsgelegd (als de richting is rij ) of bottom-to-top (als richting is kolom

 Flex-container {
Display: Flex;
Flex-richting: rij-achterzijde;


Flexcontainer {
Display: Flex;
Flex-richting: kolom omgekeerd;
}

Dit kan van pas komen als u de lay-out op kleinere schermen wilt omkeren.

Laten we bijvoorbeeld zeggen op desktopschermen die u tekst aan de linkerkant van het scherm wilt weergeven en een afbeelding aan de rechterkant (zie Surfboard-afbeelding hierboven). Op mobiel, dit zou de afbeelding onder de tekst verplaatsen. Door de richting om te keren, kunt u ervoor zorgen dat het beeld in plaats daarvan boven de tekst verschijnt.

Pas de uitlijning aan

De instellingen van Flexbox geven u ook twee verschillende methoden voor het afstemmen van inhoud: verticaal en horizontaal. Hier zijn uw horizontale uitlijningsopties voor items in een flexcontainer:

flex-start : Items in de richting van het begin van de rij (links, tenzij u de lay-out hebt omgekeerd)

centrum : Items gecentreerd binnen de rij

flex-end : Items in de richting van het einde van de rij (rechts, tenzij u de lay-out hebt omgekeerd)

ruimte tussen : Items gelijkmatig verdeeld langs de rij

ruimte-around : Items gelijkmatig verdeeld langs de rij, met gelijke ruimte aan weerszijden van elk element

Dus de code kan er als volgt uitzien:

 Flex-container {
Display: Flex;
Flex-richting: rij;
Richting-Inhoud: Flex-start | flex-end | centrum | ruimte-tussen | ruimtelijk | rekken;
}

Hier zijn uw verticale uitlijningsopties voor items in een flexcontainer:

flex-start : Items uitgelijnd op de bovenkant van de rij

centrum : Items zijn gecentreerd in de rij

flex-end : Items uitgelijnd op de onderkant van de rij

rekken : Items uitgerekt over de hoogte van de rij

baseline : Items uitgelijnd met hun basislijnen (de denkbeeldige lijn die tekst zit)

De code kan er als volgt uitzien:

 Flex-container {
Display: Flex;
Flex-richting: rij;
Align-items: flex-start | flex-end | centrum | Baseline | rekken;
}

Standaard zullen de kinderen van een flexcontainer altijd proberen te passen op een enkele regel. Als u dit wilt wijzigen, kunt u de wikkelen attribuut. Hierdoor kunnen kinderen naar een nieuwe lijn wikkelen als ze geen ruimte meer hebben.

 Flex-container {
Display: Flex;
Flex-wrap: wrap;
}

Flex-items krijgen ook hun eigen flex-gebaseerde eigenschappen. Wanneer een element in een flexcontainer wordt geplaatst, wordt deze automatisch een flex-kind en krijgt deze zijn eigen set flex-based CSS-stijlen. Deze styles besturingsmeting, uitlijning en weergave-volgorde.

Flexifferie

Flex-kinderen kunnen hun breedte of hoogte veranderen (afhankelijk van de indelingsrichting van de container) om de beschikbare ruimte te vullen.

Webflow geeft u drie vooraf ingestelde opties voor FLEX-SUZOREN: Krimp indien nodig, vul de lege ruimte en krimpt niet. Merk op dat elk kindelement zijn eigen instellingen kan hebben, wat een overvloed aan ontwerpopties mogelijk maakt.

 Flex-item {
flex-krimpen: & lt; nummer & gt ;;
flex-groei: & lt; nummer & gt ;;
Flex-basis: & lt; lengte & gt;auto;
}

Laten we eens kijken naar wat elk van deze opties doet:

Krimpen indien nodig: Maten het item op basis van de breedte / hoogte of de inhoud ervan. Het item wordt niet groter dan het nodig is, maar kan krimpen naar de minimale grootte om overloop te voorkomen
Vul lege ruimte in: Hiermee kan het artikel uitbreiden om alle beschikbare ruimte in zijn ouder te vullen. Als u dit op alle items in een flexcontainer instelt, breiden ze zich uit om gelijke hoeveelheden lege ruimte in te nemen
Niet krimpen: Maten het item op basis van de breedte / hoogte of de inhoud ervan, maar staat het niet toe om te krimpen, zelfs als dat overloop zal veroorzaken

Flex-items kunnen ook hun eigen uitlijninstellingen hebben, die de standaarduitlijning hebben ingesteld door hun ouderflexcontainer. Deze uitlijningen gedragen zich zoals eerder uitgelegd.

 Flex-item {
Display: Flex;
Flex-richting: rij;
Align-items: flex-start | flex-end | centrum | Baseline | rekken;
}

Standaard, Flex-items weergeven in dezelfde volgorde zoals ze in de broncode voorkomen. Met FlexBox kunt u dit gedrag overschrijven om de elementen weer te geven in precies de gewenste volgorde.

De zijn vier hoofdopties die u hier kunt gebruiken:

Auto : De standaardwaarde, die items bestelt zoals ze in de bron zijn
Eerste : Item verschijnt eerst in zijn flexcontainer
Laatste : Item verschijnt de laatste in zijn flexcontainer
Op maat : U kunt de bestelling aanpassen Uw artikel wordt weergegeven in

Aangepaste bestelling kan worden gedefinieerd als een getal, dat de volgorde specificeert waarin het FLEX-item in een flexcontainer verschijnt.

 Flex-item {
bestelling: & lt; integer & gt ;;
}

Waarom zou ik het gebruiken?

Ik ben blij dat je het vroeg! Met behulp van FlexBox kunt u eenvoudig responsieve lay-outs maken die ooit zeer moeilijk (of onmogelijk) waren om te creëren met oudere CSS-lay-outmodules.

Bekijk de voorbeelden in de onderstaande afbeelding - waarvan je waarschijnlijk al over het web hebt gezien. Bijna allen zouden een aanzienlijke hoeveelheid CSS (vooral in verschillende schermmaten) duren, maar nemen slechts een paar eenvoudige regels om te bereiken met FlexBox. Om deze voorbeelden in actie te zien, bezoek dan flexbox.webflow.com

De ongelooflijke kracht van FLEXBOX

FLEXBOX BASICS

Hoe flexbox te gebruiken

Lay-out richtingen

Pas de uitlijning aan

Flexifferie

Waarom zou ik het gebruiken?

Procedures - Meest populaire artikelen

Google Dia's: Hoe een document te ontwerpen

Bouw een snelle reactieve blog met Svelte en Sapper

Een animatie toevoegen aan SVG met CSS

Photoshop Kleurverandering: 2 Gereedschap die u moet kennen

10 tips voor het beheersen van Apple's Foto's App

Verf een originele Tarot-kaart

Voeg visuele aanwijzingen toe aan uw site

Hoe een volledige pagina-website op te bouwen in Angular

Categorieën