Flexbox: The complete guide

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

3.95 (174 reviews)
Udemy
platform
English
language
Web Development
category
Flexbox: The complete guide
8,320
students
1 hour
content
Sep 2017
last update
FREE
regular price

What you will 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

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

Content

Introduction

Introduction
Course content
Browser support
Basics and terminology
Flexbox basics

Flex container

Flex container
Flex direction
Flex wrap
Justify content
Align items
Align content
Flex container

Flex item

Align self
Order flex items
Flex grow
Flex shrink
Flex basis
Flex item

What's next?

Tips and resources

Reviews

Alexandre
June 29, 2021
The course instructor explains the theory in a easy way and at a good pace. The only problem is not having real world examples. It's a great free course if you want to learn Flexbox and start applying what your learnt all in the same day.
Tej
September 16, 2020
Good course when you already know Basic CSS to this point. What I find helpful is learning from w3schools and this course hand in hand while trying out all the properties on my local machine HTML document.
Phil
April 30, 2020
The instructor is very knowledgeable and able to explain the concepts clearly. I am also enjoying the course so far. The instructor is also engaging!
Nancy
February 21, 2018
I like the class. But I feel like the class is too short. The instructor can give more examples and details.
Eric
January 24, 2018
I like the direct and to-the-point presentation. Covered the material well with a reasonable amount of time. Was able to start using concepts right away.
Mateusz
November 24, 2017
Nothing important wasn't said in this course. The author explains such easy and silly things sooo long, I've started to feel like I'm mental in his eyes. Waste of time, money and really.. try a bit harder next time. P.S.: Tests are just formality, which isn't good at all. It's not a test in school! We want to learn and check ourselfes and not just pass the test and go on... P.S 2.: In last test in last question, the right answear is "Any positive" and what i've learned from Your course about shrinking items is that, this takes 0 or 1. So it's not ANY nor POSITIVE.
Wimihe
September 13, 2017
Great job in this topic, the deep explanation around the axis and their orientations was fundamental for me to understand how flexbox works. Plus, the webpage and the embed plunkers are great to follow the course examples
Pearce
July 27, 2017
Really solid course. Flexboxes were tricky for me to learn to begin with and I looked at many of the graphics he used on their hosted site. But seeing of all this information laid out and implemented live really helped to grasp how to use flexboxes.
Ray
July 21, 2017
The vocal clarity is adequate although I sometimes miss a word or two. The course organization where context is frequently provided along the way - referencing previously explained material and static web pages is very helpful. The code sandbox "Preview" was also a super feature - especially since the author provides a static version of it that I can experiment with. An excellent course.
Ana
July 16, 2017
Really enjoyed and recommend this course. Examples used after explanation on each property made it explicit and easy to understand. The teste result made after finishing the course speaks for itself. Keep on the good work.
Francisco
July 15, 2017
This course is perfect for gaining in-depth knowledge about flexbox and its properties. During the course, the trainer explained the different properties of flex, using several examples, thus making learning and gaining knowledge easier.
Rúben
June 16, 2017
This course has a very in-depth look at the flexbox layout module. The learning curve is nice. I would also like to see some practical exercises building layouts with flexbox. Congrats good work.
Luis
June 13, 2017
Very well built and thought-out course with a great in-depth explanation of all of flexbox's constructs. Rodolfo also seems to be a great instructor and i can't wait to see his other courses.
Diogo
June 12, 2017
Awesome content, excellent for all levels of knowledge. The repository is an awesome extra that allows us to apply and test exactly what is being shown easily.
Sofia
June 11, 2017
Good job. Very easy to follow and understand. The contents are well explained and structured. Next time maybe you could add some practice exercises between the chapters. Thank you for the course!

Charts

Price

Flexbox: The complete guide - Price chart

Rating

Flexbox: The complete guide - Ratings chart

Enrollment distribution

Flexbox: The complete guide - Distribution chart
1160196
udemy ID
3/27/2017
course created date
11/17/2019
course indexed date
Bot
course submited by