Flexbox: The complete guide
4.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,024 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Flexbox: The complete guide to your Wishlist.

Add to Wishlist

Flexbox: The complete guide

A complete guide across all the properties, values and concepts behind the new Flexbox CSS module.
4.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,024 students enrolled
Last updated 9/2017
English
Current price: $12 Original price: $115 Discount: 90% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I 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
View Curriculum
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 is the target audience?
  • 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
Compare to Other Flexbox Courses
Curriculum For This Course
16 Lectures
01:04:13
+
Introduction
4 Lectures 10:48



Basics and terminology
03:19

test

Flexbox basics
4 questions
+
Flex container
6 Lectures 34:23
Flex container
04:37


Flex wrap
07:24

Justify content
07:34

Align items
04:50

Align content
04:19

Flex container
5 questions
+
Flex item
5 Lectures 18:28
Align self
03:36

Order flex items
04:01

Flex grow
04:04

Flex shrink
01:58

Flex basis
04:49

Flex item
3 questions
+
What's next?
1 Lecture 00:39
Tips and resources
00:39
About the Instructor
Rodolfo Gonçalves
4.6 Average rating
30 Reviews
1,024 Students
1 Course
Front-end web developer

I'm Rodolfo Gonçalves and I work as a web developer since 2013.

For some time I've been working as a full-stack, but know I'm focused only on front-end.

I love web development because there's always so much happening and being created every day, each day I have something to learn about and to share.

I also love to teach, that's why I'm an instructor at Udemy. Is a way of sharing knowledge with other developers, what I think is great.

We all can help each other to be someone better tomorrow.