Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende 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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Pregunte me preguntas sobre este tema

Resumir este capítulo

Mostrar ejemplos del mundo real

Awesome!

Completion rate improved to 2.5

bookSetting the Flex Direction for Layouts

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2
some-alt