web2 logo

Artikel Links Notities

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: integer; }

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; }

naar boven

term zoeken

Notitieruimte