Summary  
This chapter explains how to use the CSS flex-direction property to control the main-axis arrangement of flex items, allowing layouts in row, row-reverse, column, or column-reverse order.  

General domain of usage  
Web page layout design

De eigenschap `flex-direction` stelt ons in staat om de richting te bepalen waarin flex-items worden gerangschikt. Standaard is deze eigenschap ingesteld op `row`, wat resulteert in een links-naar-rechts indeling in browsers die Engels als standaardtaal gebruiken. U kunt deze instellen op:
```css
flex-direction: row | column | row-reverse | column-reverse;
```

Beschouw de volgende website-navigatie als voorbeeld.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibmF2aWdhdGlvbi1saXN0Ij4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPkhvbWU8L2E+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0ibmF2aWdhdGlvbi1saW5rIj5BYm91dDwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlByaWNlPC9hPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9Im5hdmlnYXRpb24taXRlbSI+CiAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+VGVhbTwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlN1cHBvcnQ8L2E+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBwYWRkaW5nOiAxMHB4Owp9CgoubmF2aWdhdGlvbi1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2aW9sZXQ7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1sZWZ0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

## column
Let op de breedte van de items; deze beslaan de volledige breedte van de ouder.

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW0gewogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIGJhY2tncm91bmQtY29sb3I6IHZpb2xldDsKfQoKLm5hdmlnYXRpb24taXRlbTpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uLXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi10b3A6IDIwcHg7Cn0KCi5uYXZpZ2F0aW9uLWxpbmsgewogIGNvbG9yOiB3aGVhdDsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKfQoKYSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Richting Beheren

row

row-reverse

column

column-reverse