Summary  
This chapter explains how the CSS justify-content property in a Flexbox container controls horizontal distribution and alignment of flex items using values like flex-start, flex-end, center, space-between, and space-around.

General domain of usage  
Front-end web layout and responsive UI design

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 en liste 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 enden af aksen.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKICBib3JkZXI6IDFweCBzb2xpZCBsYXduZ3JlZW47CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGNhZGV0Ymx1ZTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiA4MHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9uICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Alle elementer er placeret i midten.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-between
Meget lig `space-around`, bortset fra at der ikke efterlades 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 (Cascading Style Sheets), sproget til at style og ændre udseendet af websider. Udforsk kernekoncepter som tekstformatering, farver, afstande, box-modellen, Flexbox og dekorative effekter. Opbyg kompetencer til at skabe visuelt tiltalende og velstrukturerede websider. Ideel for begyndere, der ønsker et solidt fundament i CSS.

Lær hvad CSS er, hvordan det forbindes med HTML, og hvordan HTML-elementer styles ved hjælp af selektorer. Udforsk grundlæggende begreber som tekstfarver, brugerhandlings-pseudoklasser og variabler i CSS.

Opdag, hvordan du kan formatere og style tekst på dine websider. Lær at anvende brugerdefinerede skrifttyper og udforsk forskellige skrifttypeegenskaber for at forbedre tekstens udseende.

Lær det grundlæggende om boksmodellen, som definerer layout og afstand for elementer på en webside. Udforsk begreber som boksstørrelse, tilføjelse af afstand til elementer, arbejde med blok- og inline-elementer samt anvendelse af strukturelle og funktionelle pseudoklasser til avanceret styling.

Opdag Flexbox, en effektiv CSS-layoutmetode til at arrangere elementer i rækker og kolonner. Lær at kontrollere retning, justering og afstand af elementer horisontalt og vertikalt samt tilpasse individuelle flex-elementer for præcise layouts.

Lær, hvordan du forbedrer det visuelle udtryk på dine websider med CSS. Udforsk teknikker til anvendelse af baggrundsfarver og -billeder, billedstyling, brug af dekorative pseudo-elementer samt tilføjelse af skygger for at skabe imponerende designs.

Justificering af indhold horisontalt i Flexbox

flex-start

flex-end

center

space-around