Practical Frontend
Flexbox

Changing Direction

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is determined by the flex-direction property, and it determines the direction in which the elements will be laid out. The cross axis runs perpendicular to the main axis and is used to align the elements along this axis.

Knowing how to work with these two axes is essential to effectively using Flexbox. It will allow us to control the distribution of elements and create flexible and responsive layouts. Throughout this document, we will refer back to these axes, so it is important to have a solid understanding of them from the start.

The main axis is difined by flex-direction which has four possible values:

  • row
  • row-reverse
  • column
  • column-reverse
item 1
item 2
item 3
main axis
flex-direction:

By changing the flex-direction property, you can see how the layout of the contents within the flex container changes.

This is a great way to experiment and understand how Flexbox works, and how you can control the layout of elements within a container. By playing with different values of flex-direction, you can get a better understanding of how it affects the layout of the contents within the container, and how you can use it to create different types of layouts.

1. row

By default, flex-direction is set to row, which means that the child elements will be positioned in a row, side by side.

item 1
item 2
item 3
main axis
flex-direction:

2. column

However, if you change flex-direction to column, the child elements will be positioned in a column, one above the other.

item 1
item 2
item 3
main axis
flex-direction:

3. row-reverse

The row-reverse and column-reverse values of the flex-direction property are similar to row and column, respectively, except that the items are laid out in the opposite direction. So, when using row-reverse, the items are arranged from right to left,

item 1
item 2
item 3
main axis
flex-direction:

4. column-reverse

and when using column-reverse, the items are arranged from bottom to top. These values can be useful for creating different layouts and changing the visual order of the items within a flex container.

item 1
item 2
item 3
main axis
flex-direction:

row and column are two of the main axis directions that can be used to align items in a flex container. The main difference between row and column is the direction in which the items are arranged, with row aligning items horizontally and column aligning items vertically.

It’s worth noting that there are also row-reverse and column-reverse options, which arrange items in the reverse order of row and column, respectively. However, for the purpose of simplicity, from now on, we will focus on explaining the row and column options.

Previous2. Flexbox ContainerNext2.2. Main Axis Aligment