Have you failed a job interview?
Send us your job interview questions and get correct answers.

What is a flex-direction property used for and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The property flex-direction defines what will be the direction of the flow of the flex items within a flex container.

The direction can be either horizontal (default) or vertical.

To make the flex items flow horizontally within the flex container, use style flex-direction: row.

To make the flex items flow vertically within the flex container, use style flex-direction: column.

By default, the horizontal flow goes from left to right and the vertical flow from top to bottom. This can be changed.

To make the flex items flow horizontally within the flex container, but in reversed direction, use style flex-direction: row-reverse.

To make the flex items flow vertically within the flex container, but in reversed direction, use style flex-direction: column-reverse.

CSS

.container {
  display: flex;
  flex-direction: row;
}

.container2 {
  display: flex;
  flex-direction: row-reverse;
}

.container3 {
  display: flex;
  flex-direction: column;
}

.container4 {
  display: flex;
  flex-direction: column-reverse;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself