Setting the Flex Direction for Layouts
The flex-direction
property enables us to determine the direction in which flex items are arranged. By default, this property is set to row
, resulting in a left-to-right layout in browsers that use English as the default language. You can set it to:
flex-direction: row | column | row-reverse | column-reverse;
Let's consider the next website navigation as an example.
row
index.html
index.css
row-reverse
index.html
index.css
column
Pay attention to the width of the items; they cover the entire width of the parent.
index.html
index.css
column-reverse
index.html
index.css
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.5
Setting the Flex Direction for Layouts
Sveip for å vise menyen
The flex-direction
property enables us to determine the direction in which flex items are arranged. By default, this property is set to row
, resulting in a left-to-right layout in browsers that use English as the default language. You can set it to:
flex-direction: row | column | row-reverse | column-reverse;
Let's consider the next website navigation as an example.
row
index.html
index.css
row-reverse
index.html
index.css
column
Pay attention to the width of the items; they cover the entire width of the parent.
index.html
index.css
column-reverse
index.html
index.css
Takk for tilbakemeldingene dine!