CSS Flexbox
1
2
3
4
5
6
7
8
CSS Flexbox-indelingsmodule
Vóór de Flexbox Layout-module waren er vier lay-outmodi:
- Blokkeren, voor secties in een webpagina
- Inline, voor tekst
- Tabel, voor tweedimensionale tabelgegevens
- Gepositioneerd, voor expliciete positie van een element
De Flexible Box Layout Module maakt het eenvoudiger om een flexibele, responsieve lay-outstructuur te ontwerpen zonder gebruik te maken van float of positionering.
Browserondersteuning
De eigenschappen van de flexbox worden in alle moderne browsers ondersteund.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox-elementen
Om het Flexbox-model te gaan gebruiken, moet u eerst een flexcontainer definiëren.
1
2
3
Het element hierboven stelt een flexcontainer (het blauwe gebied) voor met drie flexitems.
Voorbeeld
Een flexcontainer met drie flexitems:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
In de volgende hoofdstukken leert u meer over flexcontainers en flexitems.