Take Command of CSS Flexbox


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.

Table of Contents
  1. 1 What is flexbox?
  2. 2 When and why would you use flexbox instead of floats?
  3. 3 How does flexbox work?
    1. 3.1 Flex Container (commanding officer)
    2. 3.2 Flex Item (individual soldier)
  4. 4 How do you enable and use flexbox?
  5. 5 Ten hut! How to give your soldiers their marching orders!
    1. 5.1 Step 1:
    2. 5.2 Do you want the container to behave like a block on inline element?
      1. 5.2.1 Step 2:
    3. 5.3 Do you want your main axis to be vertical or horizontal?
      1. 5.3.1 Step 3:
    4. 5.4 How do you want the extra space to be distributed along the main axis?
      1. 5.4.1 Step 4:
    5. 5.5 How do you want the extra space of LINES of items to be distributed along the cross axis?
      1. 5.5.1 Step 5:
    6. 5.6 How do you want the extra space between items to be distributed along the cross axis?
      1. 5.6.1 Step 6:
    7. 5.7 Do you want the items to wrap if they don’t fit on one line?
    8. 5.8 Shorthand Property
  6. 6 How do you make a flex item act differently than the rest?
    1. 6.1 Step 1:
    2. 6.2 Do you want to change the order of this item relative to the other items?
      1. 6.2.1 Step 2:
    3. 6.3 Do you want to have this item take up more space than the other items?
      1. 6.3.1 Step 3:
    4. 6.4 Do you want this item to take less space than the other items?
      1. 6.4.1 Step 4:
    5. 6.5 Do you want to set the default size of this item before the other item sizes are set?
      1. 6.5.1 Step 5:
    6. 6.6 Do you want to override the align-items value for this item?
    7. 6.7 Shorthand property
  7. 7 How do you make flexbox responsive with Bootstrap 4?
  8. 8 How well is flexbox supported?
  9. 9 Other great flexbox resources
  10. 10 Conclusion & next step

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?

text wrapping image
Floats were intended to keep images inline with the copy but have text flow around them. Similar to what you would find in traditional print layouts.

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.

flexbox main axix cross axis

Ok now to discuss the flex items inside the container.

Flex Item (individual soldier)

flex

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 example

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

Code examples

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.

 



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter