These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
This lesson covers the basics of what the CSS3 flexbox is and why it is the bee's knees.
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.
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 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:
width
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?
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!
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.