Take Command of CSS Flexbox

As a kid I loved playing with toy plastic army men. I would line them up and pretend to be in command giving orders to my soldiers in order to defeat the enemy. Since I was in full command, the soldiers would look to me for their orders.

Sometimes a hot shot recruit would overstep my orders and go rogue, He would ignore and override my orders and just do what he wanted.

My example demonstrates the basic principle of the CSS display property flexbox which is…

Flex items (soldiers) follow the orders given by their flex container (commander).

In addition, an individual flex item has the ability to override the orders given out by the flex container if required. All it needs is a unique class name or ID with a unique set of properties.

In this flexbox tutorial, I will be answering some of the most common questions and show you how to start using flexbox in your projects.

What is flexbox?

Flexbox is a CSS display property that was introduced in CSS3. If you are familiar with an UL and LI relationship in HTML unordered lists, flexbox is very similar to how it has sub-items or children inside a parent wrapping container. With flexbox they are called flex items.

The parent-child relationship of an unordered list

<ul>
  <li>list item</li>
  <li>list item</li>
</ul>

Is like the parent-child relationship of a flexbox container and it’s flexbox items

<div class="your-class">
 <div>flex item</div>
 <div>flex item</div>
</div>

But you’re flex items do not have to be the same type of HTML element. In this example, I use different HTML elements but the first children still act as flex items.

Since flexbox is a display property, it can be applied to any parent and child HTML elements and does not need to have its own HTML element like <flexbox>.

When and why would you use flexbox instead of floats?

The demands of web page layout have often exceeded what was currently available. Early websites used HTML tables for page layout and were then replaced by floats. But even floats were not intended for complex page layout. Their purpose is to keep an image in the text flow but allow you to float it to the right or the left and have text flow around it. Very similar to what you would see in a book or magazine.

The main reason why you would use flexbox today instead of floats is to satisfy the demands of responsive design.

Flexbox gives you the ability to change the order and alignment of elements with media queries. So you could have your last column listed first on mobile.

You would need to use javascript to achieve this same level of control in a float based layout.

Bonus: I created a flexbox cheat sheet pdf with a cross reference for flexbox utility classes to help you make your flexbox properties responsive.

How does flexbox work?

Flex Container (commanding officer)

Flex layout gives the container the ability to alter its items’ width/height (and order) to best fill the available space of the container.

The container has a main axis and cross axis which depends on the flex direction. Each axis has a start and end.

For example, if you set the flex direction to the column. The main axis is vertical and the cross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the cross axis is vertical.

Ok now to discuss the flex items inside the container.

Flex Item (individual soldier)

Flexbox items are like soldiers because they follow the orders given by their container. Just like soldiers listen to their commanding officer in battle.

By default, flex items all want to appear on the same line.

Individual flexbox items (soldiers) can be targeted with a unique class and property to override the orders given by their container.

The example below uses the class .rogue-flex-item to make adjustments to only Soldier J in red.

Your turn! You can fork this example on codepen and use as a template for trying out flexbox on your own.

Flexbox demo template available on Codepen

How do you enable and use flexbox?

Enabling flexbox is just like declaring an image to be block or inline-block. You just need to have some HTML markup with some child elements and a class name.

<div class="your-class">
 <div>flex item</div>
 <div>flex item</div>
</div>

Then in your CSS file, target your class and write display:flex

.your-class {
  /* If you just have display:flex the flex items will act like inline items */
  display:flex;
  /* determines the main and cross axis */
  flex-direction:column;
}

See this example.

Now that you have flexbox enabled and set the main and cross axis, you can now give more detailed commands on how you want your items to behave.

Ten hut! How to give your soldiers their marching orders!

Step 1:

Do you want the container to behave like a block on inline element?

The containers can act like block or inline elements. If you change this to inline-flex they will nudge up together like a list of images would.

display: read docs

flex

makes the container act display block

inline-flex

makes the container act display inline

Step 2:

Do you want your main axis to be vertical or horizontal?

flex-direction: read docs

row (default)

left to right

row-reverse

right to left

column

top to bottom

column

reverse = bottom to top

Step 3:

How do you want the extra space to be distributed along the main axis?

justify-content: read docs

flex-start (default)

items anchored to the start

flex-end

items anchored to the start

center

items centered

space-between

items evenly distributed in the line. First item in on the start and last item is at the end

space-around

start and end items are not to the edge but have 1 unit of space on each side

space-evenly

similar to space-around, except all space is the same

Step 4:

How do you want the extra space of LINES of items to be distributed along the cross axis?

align-content: read docs

flex-start

items anchored to the start

flex-end

items anchored to the end

center

items centered

space-between

first line at the start of the container and the last one is at the end

space-around

lines are evenly distributed with equal space around each line

stretch (default)

lines stretch to take up the space that is left

Step 5:

How do you want the extra space between items to be distributed along the cross axis?

align-items: read docs

flex-start

cross axis align items to start

flex-end

cross axis align items to end

center

cross axis align items center

baseline

align baselines

stretch (default)

stretch to fill the container

Step 6:

Do you want the items to wrap if they don’t fit on one line?

flex-wrap: read docs

nowrap (default)

all items will try to stay on one line

wrap

if items don’t fit they will wrap and create a new line below

wrap-reverse

if items don’t fit they will wrap and create a new line above

Shorthand Property

This is a shorthand property that sets the flex-direction and flex-wrap properties. I suggest avoid using this until you learn the core properties because it could make things more confusing.

flex-flow: read docs

< flex-direction > < flex-wrap >

example:

flex-flow: column-reverse wrap-reverse;

or just flex-flow: wrap-reverse;

How do you make a flex item act differently than the rest?

Step 1:

Do you want to change the order of this item relative to the other items?

order: read docs

[number]

default is 0

Step 2:

Do you want to have this item take up more space than the other items?

flex-grow: read docs

[number]

default 0 

Step 3:

Do you want this item to take less space than the other items?

flex-shrink: read docs

[number]

default 1

Step 4:

Do you want to set the default size of this item before the other item sizes are set?

flex-basis: read docs

[length]

A number followed by px, em, rem, or %. Check the docs for additional keywords

auto (default)

look at my width or height property

Step 5:

Do you want to override the align-items value for this item?

align-self: read docs

auto

flex-start

cross-start margin is on the cross start line

flex-end

cross-end margin is on the cross end line

center

centers are aligned

baseline

baselines are aligned

stretch (default)

fill the container

Shorthand property

flex: read docs

example:

Three values: flex-grow | flex-shrink | flex-basis flex: 2 2 10%;

How do you make flexbox responsive with Bootstrap 4?

In my example I have three flex items and I would like to have the last item to appear first only on mobile vertical orientation. Since I am working mobile first, I would need to list my flex items in the source order I want them to appear in mobile. So 3, 1, 2.

I will then use CSS to change the order at the breakpoint above what I am targeting. So my media query below is saying, “don’t apply this until the window is at least 575px wide”.

@media (min-width: 575px) {
  .rogue-flex-item  {
    order:3;
  }
}

Since Bootstrap has a set of pre-defined CSS styles we will do most of our work in the HTML document adding the necessary classes.

<h2>Bootstrap 4 Flexbox Classes</h2>
<div class="d-flex flex-row justify-content-start flex-wrap">
  <div class="order-sm-3">Soldier 3 <small>I want to lead!</small></div>
  <div class="order-sm-1">Soldier 1 <small>Yes sir!</small></div>
  <div class="order-sm-2">Soldier 2 <small>Ten hut!</small></div>
</div>
<!-- /.flex-container -->

Below is the final result.

View this example

How well is flexbox supported?

Flexbox browser support is really good except if you need to support IE9 or below. In that case, you could use a polyfill or stick to floats.

If you are using Flexbox without Bootstrap, you will also need to add browser vendor prefixes and work through some of the common bugs.

Bootstrap 4 users leverage the community to continually add the proper prefixes and work through any bugs. So you won’t have to worry about those unless you do any manual overrides of Bootstrap classes.

Other great flexbox resources

There are a lot of great flexbox tutorials and resources available and below are some of the ones I found the most helpful in my learning and exploration.

Guides

• A Complete Guide to Flexbox via css-tricks.com
• Flexbox bugs
• CSS3 Flexible Box via W3schools.com
• Flexbox Froggy – A game to help you learn flexbox

Code examples

• Responsive flexbox image gallery – codepen
• Flexbox properties demo – codepen
• Flexbox playground – codepen
• Bootstrap 4 flexbox column wrapping example – codepen

Conclusion & next step

Flexbox is really powerful and it’s fundamental to understanding how the Bootstrap 4 grid works. The main advantage flexbox has over float based layouts is re-ording items. The only way this can be done with floats is javascript DOM manipulation to change the source code to the desired result.

The three main components of flexbox are the flex container, flex items, and main/cross axis. The remaining properties build on that foundation.

Get a free flexbox cheat sheet pdf to help you reference all of the properties.