W3C

Bert Bos | Flexibele boxen (Future CSS, Utrecht 2013)

Flexibele boxen

(Flexible box)

Cascading Style Sheets

Flexbox

Layout voor grafische gebruikersomgevingen (GUI)

Flexibeler dan tabellen (display: table) en eenvoudiger dan stramienen als de structuur voldoende overeenkomt met de layout

Documenten hebben een structuur die bepaald wordt door de semantiek. Elementen die visueel aan elkaar gelinkt moeten worden hebben dus niet noodzakelijkerwijs een zuster-relatie en dan kan flexbox niet worden gebruikt. Stramienen werken wel, omdat ze willekeurige elementen naast elkaar kunnen zetten.

De mark-up van een GUI daarentegen is onderdeel van de stijl: dezelfde funkties kunnen met heel verschillende GUIs worden gebruikt. De mark-up en de layout van GUIs worden samen ontworpen en dan werkt flexbox prima.

Je kunt flexbox uiteraard wel met documenten gebruiken, maar je zult soms niet de juiste structuur hebben om flexbox te kunnen gebruiken. Als het document XSLT kan gebruiken is dat natuurlijk ook een oplossing om de structuur aan te passen zonder de semantiek te verliezen.

Flexbox

Uit de demo:

p {display: flex; flex-direction: row}

#one p {justify-content: center}
#two p {justify-content: flex-start}
#three p {justify-content: flex-end}

#five input {flex: 1}

De display: flex is verplicht. Het is niet voldoende een flex-direction te zetten. Het is dus niet mogelijk van bijvoorbeeld een flex-container te maken van eeb list-item, een inline-block of een cel in een tabel.

Vergelijk dat met kolommen of stramienen, waar het voldoende is een columns of grid eigenschap te zetten om het element een layout in kolommen te geven.

Deze beperking maakt het makkelijker flexbox te implementeren (alle flex-containers gedragen zich hetzelfde) en in een omgeving (GUI's) waar de mark-up aan de layout kan worden aangepast is dat ook geen probleem.

Geneste flex-containers

Flexbox can worden gebruikt om een tabel te transponeren:

In de dwarsrichting

Elementen in een rij of kolom kunnen worden

Individueel uitlijnen: align-self

Align-self op een een element heeft voorrang boven align-items van de ouder

(De normale waarde is auto)

Flexbox – status

Experimentele implementatie in de meeste browsers

Zonder prefix alleen in Opera 12

Einde

Terug naar agenda