web2 logo

Flexbox

Flexbox is een layout systeem waarbij flex elementen flexibel in een flex container worden verdeeld. De verdeling op de pagina is afhankelijk van de beschikbare ruimte in combinatie met zowel de eigenschappen van de flex container als de eigenschappen van de flex elementen.

Flex container : display

Dit geeft aan dat het element een flex container is. Dit kan aanvullend ook inline of block zijn. Het zorgt ervoor dat alle directe kind-elementen flex zijn.

.container {
   display: flex; /* of inline-flex */
}

CSS columns hebben geen effect op een flex container.

Flex container : flex-direction

De richting waarin flex elementen worden geplaatst, wordt bepaald door flex-direction. Flexbox elementen worden geplaatst in horizontale rijen of verticale kolommen. Eventueel is ook omloop (wrapping) mogelijk, dit moet dan apart worden opgegeven.

.container {
   flex-direction: row | row-reverse | column | column-reverse;
}

row (standaard): van links naar rechts
row-reverse: van rechts naar links
column: van boven naar beneden
column-reverse: van beneden naar boven

Flex container : flex-wrap

Via flex-wrap kan de omloop van de elementen in een flex container worden aangegeven. Standaard is er geen omloop.

.container{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (standaard) : alle flex elementen in dezelfde rij
wrap: flex elementen lopen door over meerdere rijen, van boven naar beneden
wrap-reverse: flex elementen lopen door over meerdere rijen, van beneden naar boven

Flex container : flex-flow

Voor de flex container kunnen de eigenschappen flex-direction en flex-wrap samengevoegd worden in flex-flow. Standaard is row nowrap.

flex-flow: <'flex-direction'> || <'flex-wrap'>

Flex container : justify-content

De uitlijning over de hoofd-as wordt aangegeven via justify-content. Het bepaald de verdeling van de vrije ruimte die overblijft als alle elementen een vaste grootte hebben, of als deze hun maximumgrootte hebben bereikt. Het geeft ook enige controle over de uitlijning als elementen overlopen naar de volgende rij.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start (standaard): elementen worden uitgelijnd richting de start
flex-end: elementen worden uitgelijnd richting het einde
center: elementen worden gecentreerd
space-between: elementen worden gelijkelijk verdeeld over de rij met gelijke ruimte tussen hen in
space-around: elementen worden gelijkelijk verdeeld over de rij met gelijke ruimte om hen heen

Flex container : align-items

De uitlijning in de richting die haaks staat op de rij, wordt aangegeven via align-items.

.container {
   align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start: plakken aan de haakse beginlijn
flex-end: plakken aan de haakse eindlijn
center: gecenteerd in de haakse richting
baseline: elementen worden uitgelijnd zodanig dat hun basislijn gelijk is
stretch (standaard): elementen uitrekken om de container te vullen in de haakse richting (minimums en maximums worden wel aangehouden)

Flex container : align-content

Als de inhoud van een container uit meerdere rijen bestaat, dan kan met align-content worden aangegeven hoe deze moeten worden uitgelijnd.

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start: rijen uitgelijnd richting start van de container
flex-end: rijen uitgelijnd richting einde van de container
center: rijen gecentreerd in de container
space-between: rijen gelijkelijk verdeeld over de hele container
space-around: rijen gelijkelijk verdeeld met evenveel ruimte om hen heen
stretch (standaard): rijen uitgerekt om de ruimte te vullen

Flex element: order

Met order (aangegeven met een geheel getal) kan een element een andere plaats in de container krijgen dan deze zou krijgen op basis van de volgorde in de broncode.

.item {
   order: ;
}

Flex element: flex-grow

Met flex-grow kan aangegeven worden hoeveel een element mag groeien indien er ruimte beschikbaar is. Dit wordt aangegeven met een getal dat als verhouding dient. Als alle elementen flex-grow 1 hebben, dan wordt de beschikbare ruimte gelijkelijk verdeeld over alle elementen. Indien 1 van de elementen een flex-grow van 2 heeft, dan zal dit element 2 keer zoveel van de beschikbare ruimte krijgen om te groeien. Negatieve getallen zijn hiet niet toegestaan.

.item {
   flex-grow: <getal>; /* standaard: 0 */
}

Flex element: flex-shrink

Met flex-shrink kan aangegeven worden of een element mag krimpen indien dit noodzakelijk is. Dit wordt aangegeven met een getal dat als verhouding dient. Hoe groter het getal, hoe harder dit element naar verhouding zal krimpen. Negatieve getallen zijn hiet niet toegestaan.

.item {
   flex-shrink: <getal>; /* standaard: 1 */
}

Flex element: flex-basis

Met flex-basis wordt de grootte van een element aangegeven voordat de overblijvende ruimte verdeeld wordt. Dit kan worden aangegeven met een lengte of een keyword zoals auto (automatisch op basis van de eigenschappen van het element) of content (op basis van de inhoud van het element).

.item {
   flex-basis: <lengte> | auto; /* standaard: auto */
}

Flex element: flex

Met flex kunnen flex-grow, flex-shrink en flex-basis in 1 keer worden opgegeven. Hierbij zijn flex-shrink en flex-basis optioneel. Standaard is 0 1 auto.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Flex element: align-self

Individuele elementen kunnen een afwijkende uitlijning krijgen via align-self. Eigenschappen als float, clear en vertical-align hebben geen effect op een flex element.

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.