CSS Flexbox

Axes and flex direction

Flexbox operates with two axes: one main axis and one cross axis that runs perpendicular to the main axis. We can specify the main axis by setting the flex-direction property to row, row-reverse, column or column-reverse. The default value is row.

Setting flex-direction to row or row-reverse sets the main axis along the row in the inline direction.

Main axis when flex direction is 'row' or 'row-reverse' — Image from MDN

Setting flex-direction to column or column-reverse sets the main axis from the top of the page to the bottom in the block direction.

Main axis when flex direction is 'column' or 'column-reverse' — Image from MDN

Start and end lines

Be aware that the starting and ending lines are affected by the browsers writing mode. row is going to position elements starting along the left side for left-to-right languages, but will position elements starting along the right side for right-to-left languages.

Test yourself

Description

Change the flex-direction of your .wrapper <div> element to

row-reverse

Pay attention to what happens to the perceived order of the different-colored boxes after you've made the change.

Tests

1 Your .wrapper element should have the flex direction row-reverse.

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

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #d32f2f;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}

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

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #d32f2f;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}

Editor

Preview

Run tests (ALT+Q)

Reset code

PrevNext