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.

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.

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.

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

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