Basic concepts 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:

• row
• row-reverse
• column
• column-reverse

At this point it is worth noting that a shorthand exists for flex-direction and flex-wrap — flex-flow. So for example, you can replace

flex-direction: row;
flex: wrap;

with

flex-flow: row wrap;

You can also use flexbox features to align flex items along the main or cross axis. Let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar. At the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.

First, take a local copy of this example.

Now, add the following to the bottom of the example's CSS:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Flexbox also has a feature for changing the layout order of flex items, without affecting the source order. This is another thing that is impossible to do with traditional layout methods.

The code for this is simple: try adding the following CSS to your button bar example code:

button:first-child {
  order: 1;
}

Refresh, and you'll now see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:

• By default, all flex items have an order value of 0.
• Flex items with higher order values set on them will appear later in the display order than items with lower order values.
• Flex items with the same order value will appear in their source order. So if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.
• The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.

Flexbox support is available in most new browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS, etc. However you should be aware that there are still older browsers in use that don't support Flexbox (or do, but support a really old, out-of-date version of it.)

While you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.

Flexbox is a bit trickier than some CSS features. For example, if a browser is missing a CSS drop shadow, then the site will likely still be usable. Not supporting flexbox features however will probably break a layout completely, making it unusable.

We discuss strategies for overcoming cross browser support issues in our Cross browser testing module.

For more information check the official docs.

• MDN Flexbox Webdocs

If you want to see the code

• jcunanan05 github code