Bert Bos |
Flexibele boxen (Future CSS, Utrecht 2013)
Flexibele boxen
Flexbox
Layout voor grafische gebruikersomgevingen (GUI)
- Zuster element uitlijnen van links naar rechts
(
row
), rechts naar links (row-reverse
),
van boven naar beneden (column
) of van beneden naar
boven (column-reverse
)
- Witruimte verdelen over de zuster-elementen of tussen de
elementen
- Volgorde van zuster elementen veranderen
Flexibeler dan tabellen (display: table
) en
eenvoudiger dan stramienen als
de structuur voldoende overeenkomt met de layout
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}
Geneste flex-containers
Flexbox can worden gebruikt om een tabel te transponeren:
- TBODYs kinderen horizontaal:
tbody { display: flex; flex-direction: row }
- TR's kinderen verticaal:
tr { display: flex; flex-direction: column }
In de dwarsrichting
Elementen in een rij of kolom kunnen worden
- uitgerekt (default)
align-items: stretch
- gecentreerd
align-items: center
- tegen de 1e of 2e kant
align-items: flex-start
align-items: flex-end
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
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.