Free Course Image Master CSS Flexbox: Complete Course

Free online course Master CSS Flexbox: Complete Course

Duration of the online course: 2 hours and 36 minutes

New

Build responsive layouts faster with this free CSS Flexbox course. Learn alignment, ordering, wrapping and real-world UI patterns, plus a certificate option.

In this free course, learn about

How display:flex turns immediate children into flex items and establishes a flex formatting context
Using flex-direction to set main axis (row vs column) and how axis affects alignment behavior
Enabling multi-line layouts with flex-wrap and understanding wrapping mechanics
Reordering layout visually with the order property (default 0) and applying it to flex items
Using justify-content to distribute space and align items along the main axis
Using align-items and align-self for cross-axis alignment; when centering needs extra container height
When align-content matters: only with multiple flex lines (wrap) and extra cross-axis space
Sizing items with flex shorthand; meaning of flex-grow, flex-shrink, flex-basis (e.g., 1 1 400px)
How flex:2 vs flex:1 shares leftover space proportionally among siblings
How flex-basis interacts with wrap, and how flex sizing behaves per wrapped line
Cross-browser Flexbox workflow using Autoprefixer to add needed vendor prefixes automatically
Building common UI patterns: flex navigation, pricing grid, equal-height columns, and a single-line form
Nesting flex containers to achieve combined stretching and vertical/horizontal centering in complex components
Creating responsive/mobile layouts: breakpoint reordering and stacking app sections with flex-direction:column

About the free online course

Flexbox is one of the most practical CSS layout systems for building interfaces that adapt cleanly to different screen sizes. In this free online course, you will learn how to think in axes, control spacing and alignment with confidence, and design responsive components without fighting floats, hacks, or overly complex positioning. Whether you are aiming for your first web development role or sharpening front-end skills for real projects, Flexbox is a foundation that makes everyday UI work quicker and more predictable.

You will start by understanding what happens when you turn an element into a flex container and how that decision immediately changes the behavior of its direct children. From there, you will develop intuition for direction, wrapping, and the difference between main-axis and cross-axis alignment. Instead of memorizing property names, the course helps you connect each setting to a visible result, so you can diagnose layout issues and fix them methodically.

As you progress, you will get comfortable reordering content for different breakpoints, creating navigation bars, centering elements vertically and horizontally, and solving common alignment challenges that show up in real designs. You will also learn how sizing works through the flex shorthand, including flex-grow, flex-shrink, and flex-basis, so your layouts remain stable even when content changes. Practical examples like pricing grids, equal-height columns, single-line forms, and app-like page structures reinforce how Flexbox is used in modern UI building.

Finally, the course addresses cross-browser workflow considerations with tooling that helps you ship reliable CSS. By the end, you will be able to translate a design into flexible, responsive layouts with cleaner markup and fewer workarounds, making your front-end code easier to maintain and scale.

Course content

Video class: Introduction to What The FlexBox?! 01m
Exercise: How is the course content structured?
Video class: Introduction to Flexbox! - Tutorial 2 of 20 ???? 04m
Exercise: What does setting a container to display: flex do to its immediate children?

Video class: Working with Flexbox flex-direction! - Tutorial 3 of 20 05m
Exercise: How does changing flex-direction from row to column affect the main axis in a flex container?
Video class: Wrapping elements with Flexbox! - Tutorial 4 of 20 ???? 08m
Exercise: Which statement correctly describes how to enable wrapping in a Flexbox layout?
Video class: Flexbox Ordering! - Tutorial 5 of 20 ???? 06m
Exercise: In Flexbox, what is the default value of the CSS order property for flex items when it is not set?

Video class: Flexbox Alignment Centering with justify-content! - Tutorial 6 of 20 ???? 08m
Exercise: In a flex container with the default flex-direction, what does justify-content control?
Video class: Flexbox Alignment Centering with align-items! - Tutorial 7 of 20 ???? 05m
Exercise: In a flex container, what does align-items: center primarily align, and what condition is often required for the centering to be visible?
Video class: Flexbox Alignment Centering with align-content! - Tutorial 8 of 20 ???? 06m
Exercise: When does align-content start having a visible effect in a Flexbox layout?
Video class: Flexbox Alignment Centering with align-self! - Tutorial 9 of 20 ???? 02m
Exercise: What does align-self do in a Flexbox layout?

Video class: Understanding Flexbox sizing with the flex property! - Tutorial 10 of 20 ???? 04m
Exercise: In Flexbox, what does setting an item to `flex: 2` mean compared to siblings with `flex: 1`?
Video class: Finally understanding Flexbox flex-grow, flex-shrink and flex-basis! - Tutorial 11 of 20 ???? 10m
Exercise: In Flexbox, what does the shorthand declaration flex: 1 1 400px represent (in order)?
Video class: How Flexbox's flex-basis and wrapping work together! - Tutorial 12 of 20 ???? 08m
Exercise: When a flex container has flex-wrap: wrap enabled, how do flex-grow, flex-shrink, and flex-basis behave across wrapped lines?

Video class: Cross Browser Flexbox Support Autoprefixer!! - Tutorial 13 of 20 ???? 11m
Exercise: What is the main purpose of using Autoprefixer in a Flexbox workflow?

Video class: Pure Flexbox navigation code along! - Tutorial 14 of 20 ???? 10m
Exercise: In a flexbox-based navigation built with a
containing a
- items, which element should be set as the flex container?
- Video class: Mobile content reordering with Flexbox! - Tutorial 15 of 20 ???? 12m
- Exercise: To reorder sections at a breakpoint using Flexbox, where must the order property be applied?
- Video class: Nesting Flexbox for vertical and horizontal centering with Flexbox! - Tutorial 16 of 20 ???? 16m
- Exercise: In a slider navigation where items must stay the same height (stretch) but the text must be vertically centered, what is the key technique used to solve it?
- Video class: Flexbox Pricing Grid! - Tutorial 17 of 20 ???? 08m
- Exercise: Why didn’t applying align-self: flex-end to the CTA button move it to the bottom until another change was made?
- Video class: Flexbox Equal height columns and leftover elements! - Tutorial 18 of 20 ???? 07m
- Exercise: Which Flexbox property should you use on the flex container to control how leftover horizontal space is distributed between items in a row?
- Video class: Flexbox single line form! - Tutorial 19 of 20 ???? 05m
- Exercise: Which pair of Flexbox properties centers a single form both horizontally and vertically inside a full-screen container?
- Video class: Create a mobile app layout with Flexbox! - Tutorial 20 of 20 ???? 11m
- Exercise: In a phone-style app layout, which Flexbox setting stacks the header, content, and icon bar vertically instead of in a single row?

Learn aboutCSS

Discover a curated list of free online CSS courses designed to elevate your web design skills. Master styling, layouts, and responsive design with ease. Join now!