Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Ställa in Flexriktning för Layouter | Bemästra Flexbox för Layout
CSS-Grunder

bookStälla in Flexriktning för Layouter

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:

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

Följande webbplatsnavigering används som exempel.

row

index.html

index.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

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

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

Vad gör egenskapen flex-direction?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 2

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

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

How does flex-direction affect the layout of navigation menus?

Can you show more examples of when to use each flex-direction option?

Awesome!

Completion rate improved to 2.56

bookStälla in Flexriktning för Layouter

Svep för att visa menyn

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:

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

Följande webbplatsnavigering används som exempel.

row

index.html

index.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

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

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

Vad gör egenskapen flex-direction?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 2
some-alt