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

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.

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

Leave a Reply