Flexbox (Part 2) — Direction and Axis

Knowing which way you’re going

Live dev notes taken throughout the What the Flexbox course by Wesbos — What the Flexbox

In this post, we’ll be looking at how to read and specify the direction of how your flex items are arranged in its container. This is fundamental to implementing justification and alignment properties.

Flex Direction

The flex-direction is an important concept to understand as it establishes the directional flow of all the elements inside the flex container

To get a visual idea of what it does, let’s start with the example base

<!-- index.html -->

<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 class="box box9">9</div>
  <div class="box box10">10</div>
</div>

flex-direction: row

For our flex container, let’s set the flex-direction to row