Flexbox: The complete guide

A complete guide across all the properties, values and concepts behind the new Flexbox CSS module.

Created byRodolfo Gonçalves

Last updated 9/2017

English

English [Auto],

What you'll learn

Students will be able to build awesome and flexible layouts, with both static and dynamic content
Students will be capable of handling any layout challenge that without flexbox would be a pain in the neck
Students will be able to build their own grids if they don't want to depend on any complex grid system

Course content

4 sections • 16 lectures • 1h 4m total length

Introduction2:02
Discover flexbox, the CSS layout module that distributes space among items in a container, enabling responsive designs with less code and adaptable layouts.
Course content0:20
Browser support5:05
Evaluate browser compatibility for flexbox across major browsers and versions using Can I Use data, vendor prefixes, and a plugin to apply prefixes for broad, reliable support.
Basics and terminology3:19
Master how Flexbox uses flex containers and flex items to manage layout along the main and cross axes, with axis start and end points guiding flexible, complex layouts.
Flexbox basics

Flex container4:37
Explore how to build flexible layouts using the flex container, display: flex, and core flexbox concepts like the main axis, cross axis, item alignment, and overflow handling.
Flex direction5:39
Explore how flex direction defines the main axis and item placement in flexbox, using row, row-reverse, column, and column-reverse to control horizontal and vertical layouts.
Flex wrap7:24
Explore how flex wrap allows wrapping flex items into multiple lines or columns using no wrap, wrap, and wrap reverse, and how flex direction influences wrapping behavior.
Justify content7:34
Learn to align flex items along the main axis with justify-content in flexbox, using center, space-between, and space-around, and adjust the main axis for vertical alignment on the cross axis.
Align items4:50
Master cross-axis alignment in flexbox by using the line items property (align-items) to position items with values like flex-start, center, and stretch, and apply baseline alignment when needed.
Align content4:19
Align content in flex layouts by using justify content and align content to control line positioning, center or stretch lines on the cross axis with space between and space around.
Flex container

Align self3:36
Learn to control individual flex items with align-self, overriding the container’s alignment. Use values like flex-start, center, baseline, and stretch to position specific items while the rest follow align-items.
Order flex items4:01
Learn how flex order controls the placement of flex items along the main axis, including positive, zero, and negative values, to enable responsive design.
Flex grow4:04
Explore how flex grow fills the remaining space on the main axis, distributes space by proportional growth, and demonstrates equal versus weighted growth across three items.
Flex shrink1:58
Learn how flex shrink governs item sizing to fit a line, with a default of 1, and how setting 0 or using first-child prevents shrinking and triggers overflow.
Flex basis4:49
Learn how flex basis defines the default size of a flex item before space is distributed, and how zeroing flex basis with flex-grow creates equal widths across items.
Flex item

Requirements

Students should have basic understanding of HTML and CSS

Description

This course is about Flexbox, the new layout module in CSS3 that lets build complex layouts more easily, with less code and with better quality.

It let's you lay out, align and distribute space among items within a container, even when their sizes are unknown or dynamic.

In this course you'll learn how to use flexbox for:

Aligning items both vertically and horizontally
To build from even the most complex layouts with ease
To build more responsive design
To create modern grids
And much more.

The only thing you need to take this course is:

A web browser
Knowledge of CSS
Knowledge of HTML.

During this course I will walk you through all the properties of this new CSS module but, besides that, I'll teach you the fundamentals. So you can understand what is really happening when working with the different properties.

Once you get the key concepts, the rest will be a joy to work with.

For this course I've built a page to give all the content you might need and it will have several exercises and embed code editor to see flexbox in action!

In these exercises you'll be able to change all the CSS and HTML e see the results live, which is really good so you can try different properties and values and see what is happening to your layout.

Here are the topics that we'll be talking about:

Browser support
Basics and terminology
Flex container vs flex items
Flex direction
Wrapping content
Alignment on the main axis
Alignment on the cross axis
Flex items alignment
Ordering items
Managing item's sizing

At the end, I'll give you some additional resources that might be helpful for you when working with flexbox.

Who is the target audience?

Web designers and front-end developers
People who is tired of struggling with layout problems
Anyone who likes to find the cleanest and most reliable solutions

Who this course is for:

This course is targeted for those who want to learn how to build layouts using Flexbox
This course is perfect to those who ever had nightmares about how to align, scale and position their HTML elements
This course suits anyone who want to learn new techniques to organize their layouts with a clean and simple set of CSS rules

Flexbox: The complete guide

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 11min

Flex container6 lectures • 34min

Flex item5 lectures • 18min

What's next?1 lecture • 1min

Requirements

Description

Who this course is for: