FlexBox

Introduction

Floats, which we saw in the previous topic, were never intended to be used for layout. Having said that developers found ways in which to use them to create their layouts. However if you have worked with floats you might have noticed some limitations or bugs, such as vertical centering.

Learning Objectives

• How to define a flex container
• What items become a flex-item
• If a flex item can also be a flex container
• When to use Flexbox
• The difference between justify-content and align-items.
• How to change the direction of the axis of Flexbox
• How to change the display order of content with Flexbox

Overview

Flexbox initially developed by Mozilla to make layouts. It is a new layout mode in CSS3. In addition there were 3 different iterations of the flex property. The final 2012 spec — display: flex has excellent browser support. All modern browsers, including mobile, IE11 and Edge, fully support the current Flexbox spec.

Study

• Watch this recorded session

• Go through the FlexBox series of interactive tutorials at scrimba.com

• Watch Wes Bos’ tutorial What the Flexbox?!. This course consists of 20 videos covering Flexbox: watch on Youtube.

While watching video #13 on the Flexbox series and coding along, you might find that your are not getting the same results with what is being shown on the video. This happens because a lot of years have passed since this video was uploaded (2015) and browsers have evolved to fully supporting Flexbox. Therefore, Autoprefixer will not produce the vendor-prefixes. Don’t worry for that but make sure to understand how Gulp works, as it can work equally well on other not-widely supported CSS properties and it is one of the most powerful and popular build tools available for front end developers.

• Once you have completed the course, and you want more in depth information, you can read through CSS-Tricks Complete Guide to Flexbox

• Read through Interneting is hard’s tutorial to see how to use Flexbox to help create flexible layouts.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

RECORDINGS

• Introduction to FlexBox (2h)
• Flexbox Children Properties (2h)
• Flexbox Practice with Paulin (1h)

• Try the interactive Flexbox froggy game.

• This MDN Flex article, which shows examples of what you can achieve with Flexbox.

• Dive Into Flexbox is an in depth article with examples.