Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

Flexbox: The complete guide

via Udemy

Overview

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

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

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'syou 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 mostcomplex 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 ofHTML.

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 topicsthat 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-enddevelopers
  • People who is tired of struggling with layout problems
  • Anyonewho likes to find the cleanest and most reliable solutions

Taught by

Rodolfo Gonçalves

Reviews

4.2 rating at Udemy based on 172 ratings

Start your review of Flexbox: The complete guide

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.