CSS Flexible Box Layout

CSS Flexible Box Layout is een CSS module die het box model van CSS verder optimaliseert. Flexbox is geoptimaliseerd voor user interface design en de lay-out van items. Onderliggende items van een flex container kunnen in elke richting worden geplaatst op een as. Afmetingen van items in een flex container zijn flexibel. Zo kunnen afmetingen groeien om de ongebruikte ruimte te vullen, of kunnen ze krimpen om binnen de grenzen van het ouder element te passen.

 

Basis voorbeeld

In het voorbeeld hieronder is een container ingesteld als display: flex waardoor de drie onderliggende elementen "flex elementen" worden. De waarde van justify-content is ingesteld op space-between om de items gelijkmatig op de hoofdas te plaatsen. Tussen elk item wordt een gelijke hoeveelheid ruimte geplaatst, waarbij de linker- en rechterartikelen gelijk liggen met de randen van de flex container. Op de dwarsas zijn de items uitgetrokken (stretched) tot gelijke hoogte. Dit komt omdat de default waarde voor align-items stretch is. De items strekken zich uit tot de hoogte van de flex container, waardoor ze elk even lang lijken als het langste item.

Referentie

CSS Eigenschappen

Alignment Eigenschappen

De eigenschappen align-content, align-self, align-items en justify-content waren aanvankelijk onderdeel van de Flexbox-specificatie, maar worden nu gedefinieerd in Box Alignment-specificatie. De Flexbox-specificatie verwijst nu naar de Box Alignment-specificatie voor up-to-date definities. Alsook extra Alignment eigenschappen worden nu gedefinieerd in de Box Alignment-specificatie.

Woordenlijst resultaten

Gidsen

Basisconcepten van Flexbox
Een overzicht van de eigenschappen van flexbox
Verhouding Flexbox tot andere layout methodes
Hoe flexbox zich verhoudt tot andere layout methodes, en tot andere CSS-specificaties
Items uitlijnen in een flex container
Hoe de Box Alignment-eigenschappen werken met flexbox.
Flex items ordenen
Hoe de volgorde en de richting van items te wijzigen, inclusief geldende aandachtspunten hierbij
Ratios van flex items langs de hoofdas beheren
Beschrijving van de eigenschappen flex-grow, flex-shrink en flex-basis.
Wrapping van flex items
Hoe flex containers creëren met meerdere lijnen, en de de weergave van de items in die lijnen instellen.
Typische Flexbox use cases
Design pattersn voor typische use cases
Achterwaartse compatibilteit van Flexbox
Browser status van flexbox, interoperabiliteit en ondersteuning van oudere browsers, en een overzicht van de versies van de specificatie

Specificaties

Specificatie Status Opmerking
CSS Flexible Box Layout Module Candidate Recommendation Initial definition.

Zie ook

Flexbugs
een door de community samengestelde lijst met Flexbox gerelateerde browser bugs en workarounds
Cross-browser Flexbox mixins
Een verzameling mixins om crossbrowser Flexbox functionaliteiten te voorzien in oudere browsers die de moderne Flexbox syntax niet ondersteunen