Basic concepts of flexbox
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.
The two axes of flexbox
When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the
flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
The main axis
The main axis is defined by flex-direction, which has four possible values:
Should you choose row or row-reverse, your main axis will run along the row in the inline direction.
column-reverse and your main axis will run from the top of the page to the bottom — in the block direction.
The cross axis
The cross axis runs perpendicular to the main axis, therefore if your
flex-direction (main axis) is set to
row-reverse the cross axis runs down the columns. If your main axis is
column-reverse then the cross axis runs along the rows. Understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other.