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-shrinkenflex-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