Summary  
This chapter explains how to use the CSS flexbox justify-content property to align and distribute items horizontally along the main axis using values such as flex-start, flex-end, center, space-between, and space-around.

General domain of usage  
Web page layout

Egenskaben `justify-content` er afgørende for at bestemme placeringen af flex-elementer langs hovedaksen. Standardværdien er `flex-start`.
```css
justify-content: flex-start | flex-end | center | space-between | space-around;
```


Lad os gennemgå hvert tilfælde i praksis. Vi vil arbejde med listen af kort.

## flex-start
Standardværdi, som placerer alle elementerne i starten af hovedaksen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iY2FyZHMtbGlzdCI+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvam9rZXIucG5nIgogICAgICAgICAgYWx0PSJKb2tlciIKICAgICAgICAgIHdpZHRoPSI2NHB4IgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBUaGUgSm9rZXIgaXMgQmF0bWFuJ3MgaWNvbmljIHN1cGVydmlsbGFpbiBrbm93biBmb3IgaGlzIGNoYW90aWMgYW5kCiAgICAgICAgICBzYWRpc3RpYyBiZWhhdmlvciBhbmQgZGlzZmlndXJlZCBjbG93biBhcHBlYXJhbmNlLgogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hbGllbi5wbmciCiAgICAgICAgICBhbHQ9IkFsaWVuIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIEFuIGFsaWVuIGlzIGEgYmVpbmcgZnJvbSBhIHBsYW5ldCBvdGhlciB0aGFuIEVhcnRoLCBvZnRlbiBkZXBpY3RlZCBhcwogICAgICAgICAgaGF2aW5nIGV4dHJhdGVycmVzdHJpYWwgZmVhdHVyZXMgYW5kIGFkdmFuY2VkIHRlY2hub2xvZ3kuCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2Nsb3duLnBuZyIKICAgICAgICAgIGFsdD0iQ2xvd24iCiAgICAgICAgICB3aWR0aD0iNjRweCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgQSBjbG93biBpcyBhIGNvbWljIHBlcmZvcm1lciBrbm93biBmb3IgdGhlaXIgZGlzdGluY3RpdmUgbWFrZXVwLAogICAgICAgICAgY29sb3JmdWwgY29zdHVtZXMsIGFuZCBhbXVzaW5nIGFudGljcywgb2Z0ZW4gc2VlbiBhdCBjaXJjdXNlcyBhbmQKICAgICAgICAgIGNoaWxkcmVuJ3MgcGFydGllcy4KICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdG95LW1vdXNlLnBuZyIKICAgICAgICAgIGFsdD0iVG95IG1vdXNlIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIEEgdG95IG1vdXNlIGlzIGEgc21hbGwgcGxheXRoaW5nIHNoYXBlZCBsaWtlIGEgbW91c2UsIHVzdWFsbHkgbWFkZSBvZgogICAgICAgICAgZmFicmljLCBwbGFzdGljLCBvciBydWJiZXIsIGZvciBlbnRlcnRhaW5tZW50IG9yIHBldCBpbnRlcmFjdGlvbi4KICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvZ2hvc3QucG5nIgogICAgICAgICAgYWx0PSJHaG9zdCIKICAgICAgICAgIHdpZHRoPSI2NHB4IgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBBIGdob3N0IGlzIGEgc3VwZXJuYXR1cmFsIGVudGl0eSBvciBzcGlyaXQgb2YgYSBkZWNlYXNlZCBwZXJzb24sIG9mdGVuCiAgICAgICAgICBkZXBpY3RlZCBhcyB0cmFuc2x1Y2VudCwgaW50YW5naWJsZSwgYW5kIGhhdW50aW5nIGEgc3BlY2lmaWMgbG9jYXRpb24uCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmRzLWxpc3QgewogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICBkaXNwbGF5OiBmbGV4OwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-end
Alle elementer er placeret ved aksens ende.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKICBib3JkZXI6IDFweCBzb2xpZCBsYXduZ3JlZW47CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGNhZGV0Ymx1ZTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiA4MHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9uICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-around
Fordeler alle elementer jævnt langs hovedaksen med lidt plads i hver ende.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-between
Dette ligner meget på `space-around`, bortset fra at der ikke efterlades nogen plads ved aksens ender.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgY2FkZXRibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDgwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

Hvilken af følgende værdier for `justify-content`-egenskaben vil centrere flex-elementer horisontalt i en flex-container?

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Horisontal Justering af Indhold

flex-start

flex-end

center

space-around

space-between