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

Egenskapen `flex-direction` gör det möjligt att bestämma i vilken riktning flexobjekt ordnas. Som standard är denna egenskap inställd på `row`, vilket resulterar i en layout från vänster till höger i webbläsare som använder engelska som standardspråk. Du kan ställa in den till:
```css
flex-direction: row | column | row-reverse | column-reverse;
```

Låt oss betrakta följande webbplatsnavigering som ett exempel.

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

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBwYWRkaW5nOiAxMHB4Owp9CgoubmF2aWdhdGlvbi1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2aW9sZXQ7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1sZWZ0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

## column
Observera bredden på objekten; de täcker hela förälderns bredd.

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW0gewogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIGJhY2tncm91bmQtY29sb3I6IHZpb2xldDsKfQoKLm5hdmlnYXRpb24taXRlbTpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uLXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi10b3A6IDIwcHg7Cn0KCi5uYXZpZ2F0aW9uLWxpbmsgewogIGNvbG9yOiB3aGVhdDsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKfQoKYSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9

Behärska grunderna i CSS, det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska centrala koncept såsom textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor.

Förstå hur CSS kopplas till HTML och hur stilar tillämpas genom selektorer.
Tillämpning av färger, textformatering och hovringseffekter för att styra visuell presentation.

Förbättra typografi med hjälp av radavstånd, mellanrum, typsnittsegenskaper och anpassade typsnitt. Kontrollera typsnittsfamiljer, vikt, stil och storlek för ökad läsbarhet.

Styr layoutstruktur med hjälp av marginaler, utfyllnad, ramar och bredd-egenskaper. Förstå boxmodellens storlekshantering och elementens visningstyper såsom block, inline och inline-block.

Styr horisontella och vertikala layouter med Flexbox-egenskaper. Justera riktning, justering och avstånd för att strukturera UI-komponenter.

Förbättra layouter med bakgrundsfärger, bilder, pseudo-element och skuggor. Styla visuella komponenter för djup och kontrast.

Styrriktning

row

row-reverse

column

column-reverse