Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Indstilling af Flex-retning for Layouts | Mestring af Flexbox til Layouts
CSS-Grundlæggende

bookIndstilling af Flex-retning for Layouts

Egenskaben flex-direction gør det muligt at bestemme den retning, som flex-elementerne arrangeres i. Som standard er denne egenskab sat til row, hvilket resulterer i et layout fra venstre mod højre i browsere, der bruger engelsk som standardsprog. Du kan indstille den til:

flex-direction: row | column | row-reverse | column-reverse;

Lad os tage den følgende webstedsnavigation som et eksempel.

row

index.html

index.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

Bemærk bredden på elementerne; de dækker hele bredden af forælderen.

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

Hvad gør egenskaben flex-direction?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain the difference between each flex-direction value with examples?

How does changing the flex-direction affect the layout of my list items?

Are there any best practices for choosing a flex-direction in navigation menus?

Awesome!

Completion rate improved to 2.56

bookIndstilling af Flex-retning for Layouts

Stryg for at vise menuen

Egenskaben flex-direction gør det muligt at bestemme den retning, som flex-elementerne arrangeres i. Som standard er denne egenskab sat til row, hvilket resulterer i et layout fra venstre mod højre i browsere, der bruger engelsk som standardsprog. Du kan indstille den til:

flex-direction: row | column | row-reverse | column-reverse;

Lad os tage den følgende webstedsnavigation som et eksempel.

row

index.html

index.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

Bemærk bredden på elementerne; de dækker hele bredden af forælderen.

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

Hvad gør egenskaben flex-direction?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2
some-alt