Understanding flex-direction in Flexbox

I face a lot of problems when centering things in CSS. So I finally decided to learn CSS Flexbox. I started with Wes Bos's course What The Flexbox. It's a great free course, check it out if you want to learn flexbox.

Introduction

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

The container or parent element is called "flex container" while the children are called "flex items". In Flexbox there are two axes - Main axis and Cross axis. The flex items will be aligned along these axes.

flex-direction

The default direction of the main-axis is from left to right while the direction of cross-axis is from top to bottom. However, this can be changed by Flexbox property flex-direction. To understand how flex-direction changes these axes we need to see some code example.

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
  </div>

I have taken a container div (flex container) and there are 8 divs (flex items) inside it.

.container {
  display: flex;
  border: 10px solid #000000;
  flex-direction: row;
}

For Flexbox to work we need to set the display property of container to flex. The default flex-direction is row and it would align the flex items as below:

There are mainly four values for flex-direction - row, row-reverse, column and column-reverse.

flex-direction: row-reverse changes the direction of main-axis from left to right.

flex-direction: column changes the direction of main-axis from top to bottom.

flex-direction: column-reverse changes the direction of main-axis from bottom to top.

This is it for today's post. I will continue to share about Flexbox in my future posts.