Flexbox (CSS Flexibele Box Layout Module) is een manier om elementen flexibel in een container (de flexcontainer) te plaatsen. De elementen in de container (de flexitems) kunnen worden vergroot of verkleind om de containerruimte te optimaliseren, met behoud van de opgegeven volgorde en afstand. Flexbox is met name handig als u items van verschillende groottes in rijen of kolommen wilt uitlijnen, waarbij grotere items meer ruimte in beslag nemen dan kleinere.
Flexbox-instellingen
U vindt de flexbox-instellingen in het deelvenster Responsief op het tabblad Flexbox.
Flexbox gebruiken
Als u flexbox wilt gebruiken, vinkt u het selectievakje Flexbox gebruiken aan. Het huidige bovenliggende element wordt de flexibele container en de eigenschappen van de flexbox worden beschikbaar in het deelvenster Responsief.
Flexbox is in de volgende gevallen niet beschikbaar:
- Het huidige bovenliggende element is een tekstelement zoals
<p>of<h1>. - Het huidige bovenliggende element bevat inline elementen zoals
<span>of<a>. Dit is niet van toepassing als het bovenliggende element een pagina is.
Directe onderliggende elementen van de flexibele container worden flexibele items. (Lagen met hulplijnen zijn uitgesloten.) De flex-items worden gerangschikt langs een hoofdas, die horizontaal of verticaal kan worden ingesteld. U kunt ook instellen in welke richting content langs de as stroomt. Omdat de stand en richting van de flexbox kunnen worden gewijzigd, worden eigenschappen ingesteld op waarden zoals 'flex-start' en 'flex-end' in plaats van boven, onder, links of rechts.
Richting
De richting bepaalt hoe de flex-items worden gerangschikt door de hoofdas en de stroomrichting langs de as in te stellen.
| Richting | Gedrag | Hoofdas |
|---|---|---|
| row | Flex-items worden in rijen gerangschikt in de richting van de tekststroom (van links naar rechts voor talen waarin van links naar rechts standaard is, zoals het Engels). |
Horizontaal |
| row-reverse | Flex-items worden in rijen gerangschikt in de omgekeerde richting van de tekststroom (van rechts naar links voor talen waarin van links naar rechts standaard is, zoals het Engels). |
Horizontaal |
| column | Flex-items worden in kolommen gerangschikt in de richting van de contentstroom (meestal vanaf de bovenkant). |
Verticaal |
| column-reverse | Flex-items worden in kolommen gerangschikt in de omgekeerde richting van de contentstroom (meestal vanaf de onderkant). |
Verticaal |
Spatiëring
Met de spatiëring stelt u in of flex-items automatisch worden verdeeld of dat er vaste afstanden worden gebruikt.
| Spatiëring | Gedrag |
|---|---|
| Standaard | Flex-items worden automatisch gerangschikt in de flexcontainer in overeenstemming met de opgegeven instellingen voor uitvullen, terugloop en uitlijning. |
| Vast | Flex-items worden gerangschikt op basis van de opgegeven spatiëring en begrenzingsafstand van het bovenliggende element. |
Uitvullen
De uitvulling bepaalt hoe flex-items langs de hoofdas worden gerangschikt. Deze instelling is beschikbaar als u standaard spatiëring gebruikt.
| Uitvullen | Gedrag |
|---|---|
| flex-start | Flex-items worden aan de startrand van de rij of kolom geplaatst. |
| flex-end | Flex-items worden aan de eindrand van de rij of kolom geplaatst. |
| center (centreren) | Flex-items worden gecentreerd rond de hoofdas. |
| space-between | De flex-items worden gelijkmatig verdeeld over de hoofdas, met de begin- en einditems aan de randen van de container. |
| space-around | De flex-items worden gelijkmatig verdeeld over de hoofdas, met aan beide einden de helft van de ruimte. |
| space-evenly | De Flex-items worden gelijkmatig verdeeld over de hoofdas, met aan beide zijden van de begin- en einditems evenveel ruimte. |
Uitlijning op dwarsas
De uitlijning op de dwarsas bepaalt de manier waarop flex-items worden gerangschikt langs de dwarsas van de huidige rij of kolom.
| Uitlijning op dwarsas | Gedrag |
|---|---|
| flex-start | Flex-items worden aan de beginrand van de dwarsas geplaatst. |
| flex-end | Flex-items worden aan de eindrand van de dwarsas geplaatst. |
| center (centreren) | Flex-items worden gecentreerd langs de dwarsas. |
| stretch | Flex-items worden uitgerekt om de beschikbare ruimte langs de dwarsas te vullen. |
| baseline | Flex-items worden zo langs de dwarsas geplaatst dat de benchmarks worden uitgelijnd. |
Terugloop
De terugloop bepaalt of content binnen de container terugloopt. Deze instelling is beschikbaar als u standaard spatiëring gebruikt.
| Terugloop | Gedrag |
|---|---|
| nowrap | Flex-items worden in één rij of kolom gerangschikt. |
| verpakken | Flex-items kunnen teruglopen om meerdere rijen of kolommen te vormen als de flex-items te groot zijn om op één regel te passen. |
| wrap-reverse | Flex-items kunnen teruglopen om meerdere rijen of kolommen te vormen als de flex-items te groot zijn om op één regel te passen. De richting van de dwarsas wordt omgekeerd. |
Uitlijning voor terugloop
De uitlijning voor terugloop stelt in hoe rijen of kolommen worden gerangschikt langs de dwarsas (die loodrecht op de hoofdas staat) als er meerdere rijen of kolommen in de flexcontainer staan. Deze instelling is beschikbaar als u standaard spatiëring gebruikt en terugloop aanstaat.
| Uitlijning voor terugloop | Gedrag |
|---|---|
| flex-start | Rijen of kolommen worden aan de startrand van de container geplaatst. |
| flex-end | Rijen of kolommen worden aan de eindrand van de container geplaatst. |
| center (centreren) | Rijen of kolommen worden gecentreerd langs de dwarsas. |
| stretch | Rijen of kolommen worden uitgerekt om de beschikbare ruimte op de dwarsas te vullen, tenzij ze een gedefinieerde hoogte hebben. |
| space-between | Rijen of kolommen worden gelijkmatig verdeeld langs de dwarsas, met de start- en eindrijen of -kolommen aan de randen van de container. |
| space-around | Rijen of kolommen worden gelijkmatig verdeeld langs de dwarsas, met half zoveel ruimte aan elk uiteinde. |
Spatiëring onderliggend element
De afstand in pixels die wordt behouden tussen twee items in de flexcontainer. Deze instelling is beschikbaar als u een vaste afstand gebruikt.
Begrenzingsruimte
De afstand in pixels die wordt behouden tussen de buitenste items en de flexcontainer. Deze instelling is beschikbaar als u een vaste afstand gebruikt.
Volgorde van onderliggende elementen
De elementen in de flexbox worden hier getoond. Sleep items naar de nieuwe positie in de lijst om ze opnieuw te ordenen.
U kunt ook flex-items op het werkvlak verplaatsen.
Property's van onderliggende flexbox-items
Flex-items hebben hun eigen eigenschappen. Selecteer het onderliggende account om de bijbehorende Flexbox-instellingen te bekijken en te bewerken.
Hoewel flex-items kunnen groeien of kleiner worden, houden ze rekening met de minimale en maximale breedte en hoogte. De property's Links en Bovenaan staan uit, omdat flex-items zijn gerangschikt op basis van de flexbox-instellingen. De property's Transformatie kunnen wel worden gebruikt om hun posities te compenseren.
Uitlijning op dwarsas
De uitlijning van een flex-item op de dwarsas overschrijft de standaardinstelling voor de uitlijning op de dwarsas voor de container.
| Uitlijning op dwarsas | Gedrag |
|---|---|
| auto | Het flex-item gebruikt de uitlijningsinstelling voor de dwarsas voor de flexcontainer. |
| baseline | De basislijn van het flex-item is afgestemd op de benchmarks van andere flex-items met de basislijnuitlijning. |
| center (centreren) | Het flex-item wordt in het midden van de dwarsas geplaatst. |
| flex-end | Het flex-item wordt langs de dwarsas gepositioneerd aan de eindrand van de container. |
| flex-start | Het flex-item wordt langs de dwarsas gepositioneerd aan de startrand van de container. |
| stretch | Het flex-item strekt zich uit om de container langs de dwarsas te vullen, tenzij het een gedefinieerde hoogte heeft. |
Groeifactor voor flexcontainer
De groeifactor voor de flexcontainer bepaalt in welke mate het flex-item zal groeien om de beschikbare ruimte in de flexcontainer langs de hoofdas te vullen, in verhouding tot de factoren voor flexibele groei van andere items in dezelfde rij of kolom. Deze instelling is beschikbaar als u standaard spatiëring gebruikt.
Als een rij bijvoorbeeld 3 flex-items met groeifactoren voor de flexcontainer van 1, 1 en 2 bevat, neemt het laatste flex-item twee keer zo veel van de beschikbare ruimte in de rij in als elk van de andere flex-items.
Als het totaal van alle groeifactoren voor de flexcontainer voor de items in een rij of kolom kleiner is dan 1, gebruiken de flex-items mogelijk niet alle beschikbare ruimte.
Als de flexibele groeifactor 0 is, groeit het flex-item niet.
Krimpfactor voor flexcontainer
De krimpfactor voor de flexcontainer bepaalt in hoeverre het flex-item krimpt om in de flexcontainer langs de hoofdas te passen, in verhouding tot de krimpfactor voor de flexcontainer van andere items in dezelfde rij of kolom. Deze instelling is beschikbaar als u standaard spatiëring gebruikt.
Als een rij bijvoorbeeld 3 flex-items met krimpfactors voor de flexcontainer van 1, 1 en 2 bevat, krimpt het laatste flex-item meer ten opzichte van de andere flex-items. De krimpfactoren voor de flexcontainer houden rekening met de grootte van het flex-item.
Als de krimpfactor voor de flexcontainer 0 is, wordt het flex-item niet kleiner.