This lesson covers the basics of what the CSS3 flexbox is and why it is the bee's knees.

What is the Flexbox?

The Flexbox is a CSS layout mode. You may not have realized it, but you've been using CSS layout modes since the beginning of your CSS life. There are a bunch of different CSS layout modes.

The main goal of the flexbox is to create a layout mode that allows elements to be displayed intuitively on various screen sizes.

The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

MDN

In short, the flexbox allows the items in a flex container to be displayed in any direction with dimensions that flex to fit the size of the container. You might ask, but why? We can just use floats right? True... but that's actually not how floats were meant to be used.

Why the Flexbox Exists

The flexbox exists to address the exact problem of CSS layouts that adjust to various screen sizes. It has many options and settings to adjust this functionality. However you might be asking, why use it if I know how to accomplish the same thing with floats?

Floats were originally used to allow text to wrap around images. They have also been widely used for layouts, however it is not necessarily an inherit feature of floats. Remember the clearfix hack needed to actually make the parent container work?

/* Clearfix */
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}

Then you could float the contained elements using float: left or float: right but you always had to be super mindful of the width of those elements and using percentages etc...

Enter the flexbox container!

Flexbox Containers

Flexbox containers are power tools created with the following incredible complex code:

.flex-container {
  display: flex;
}

That's it! Ok, maybe a bit more code if you want to be as backwards compatible as possible:

.flex-container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

Using the above browser prefixes we can allow legacy browser versions to render flex elements correctly.

Now that we have a flex container class we apply it to a container div like this:

<div class="flex-container">
  <div class="flex-square"></div>
  <div class="flex-square"></div>
  <div class="flex-square"></div>
</div>

Applying the .flex-container class to the parent div does the following:

1. Sets the parent div as a flex container
2. Sets direct child elements as flex items
3. Sets the layout of flex items such that they are:
   1. In a horizontal line
   2. In order as written
   3. Sized to the value of their width
   4. Shrunk horizontally if not enough space is available
   5. Shrunk equally
   6. Stretched vertically to the size of the item with the largest height

This is pretty awesome if you consider all the work you would've had to do to create the same result using floats! But what if you want to alter the way flex items are displayed? Floats allow display starting from the left or right for example. What about the order in which they're displayed?

Further Flexbox Reading

Your task is to read through CSS Tricks' Complete Guide to Flexbox. There you will read about all the various ways you can manipulate flex items and alter the way they are displayed.

The flexbox is incredibly feature rich and associating each feature with a mental image of how it effects the display is crucial. This Flexbox sandbox is a great way to tinker around with the various settings to see what happens to the way items are displayed.

We also highly recommend checking out the additional resources as there is plenty more about the flexbox there!

Wrapping Up

Now that you have been introduced to the flexbox you can begin using it in places that you would normally use floats to create a responsive layout. The more familiar you get with flexbox the more comfortable you'll be reaching for it instead of the habits you may already have of using alternate approaches.

1. An animated guide to the Flexbox from Scott Domes
2. What is the Flexbox by Scott Vandehey
3. A Complete Guide to Flexbox by Chris Coyier
4. Flexbox browser support on CanIUse.com
5. Flexbox: The Next Generation of CSS Layout Has Arrived by Nick Pettit
6. Understanding CSS3 Flexbox for Responsive Design by Jake Rocheleau
7. Using CSS Flexible Boxes from the MDN Docs
8. A Visual Guide to CSS3 Flexbox Properties by Dimitar Stojanov
9. CSS3 Flexible Box by W3 Schools
10. CSS Layout Modes from the MDN Docs
11. Flexbox Sandbox Demo by Eiji Kitamura

Sorry, comments aren't active just yet!