Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Setting the Flex Direction for Layouts | Mastering Flexbox for Layouts
CSS Fundamentals

bookSetting 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.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

Pay attention to the width of the items; they cover the entire width of the parent.

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

What does the flex-direction property do?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookSetting 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.html

index.css

index.css

copy

row-reverse

index.html

index.html

index.css

index.css

copy

column

Pay attention to the width of the items; they cover the entire width of the parent.

index.html

index.html

index.css

index.css

copy

column-reverse

index.html

index.html

index.css

index.css

copy
question mark

What does the flex-direction property do?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2
some-alt