Professional CSS Flexbox

Learn how to build Web and Mobile Application Interfaces for the modern world!

Created byGreg Bararaghimian

Last updated 4/2016

English

What you'll learn

Gain a complete professional understanding of Flexbox
Utilize flexbox to solve common layout problems easily.
Create professional user interfaces for web and mobile applications with ease.

Course content

6 sections • 21 lectures • 42m total length

Setting up your Learning and Development Environment0:59
An introduction to JSbin.com the coding environment for this course. We are going to see how we can use JSbin.com to code together and learn Flexbox!
What is Flexbox?2:24
An introduction to Flexbox with an explanation of Flex Items and Flex Containers.

Flex Wrap2:20
All about the flex-wrap CSS property for Flex Containers.
Justify Content2:32
All about the justify-content CSS property for Flex Containers.
Flex Direction4:11
All about the flex-direction CSS property for Flex Containers.
Align Items3:11
All about the align-items CSS property for Flex Containers.
Align Content2:17
All about the align-content CSS property for Flex Containers.
Review and Practice With Games!0:27

Order2:22
All about the order CSS property for Flex Items.
Flex Grow3:03
All about the flex-grow CSS property for Flex Items.
Flex Shrink2:05
All about the flex-shrink CSS property for Flex Items.
Flex Basis2:40
All about the flex-basis CSS property for Flex Items.
Align Self1:55
All about the align-self CSS property for Flex Items.
Review and Practice with Games!0:27
Review

In this section we learned all of the CSS properties for Flex Items.

We've seen how we can use:

order to change the display order of items
flex-grow to specify how our items take up extra main-axis space when available
flex-shring to specify how our items shrink when there isn't enough main-axis space
flex-basis to specify a dimension tied to the main-axis
align-self to align individual items along the cross-axis on their line

Practice

A super fun way to practice what you've learned is with a couple of awesome games that you can play right in your web browser!

Try to finish Flexbox Tower Defense: http://www.flexboxdefense.com/

Try to finish Flexbox Froggie: http://flexboxfroggy.com/

Requirements

You should have a basic understanding of HTML and CSS.

Description

Flexbox Is the way to layout websites and web applications in the modern world.

In this class you will learn about all the features and properties of Flexbox and how to use them! We will take a hands on approach to discovering all the awesome ways to use Flexbox and by the end of the course you will have a professional understanding of Flexbox and how to use it to layout Websites and Web Applications like a modern CSS guru!

Each video includes a link to the lesson's code so you can easily follow and code along without needing anything but a web browser.

To be successful in this class all you need is a basic understanding of CSS and HTML!

The old way of laying out content on the web is on it's last days. Learn how to utilize Flexbox to streamline, simplify, and future-proof your Websites and Mobile Applications!

Who this course is for:

This course is perfect for anyone that wants to learn how to layout web and mobile applications for the modern world.

Professional CSS Flexbox

What you'll learn

Explore related topics

Course content

Setup2 lectures • 3min

Flex Containers6 lectures • 15min

Flex Items6 lectures • 13min

Shorthand Properties1 lecture • 1min

Techniques4 lectures • 10min

Additional Material2 lectures • 2min

Requirements

Description

Who this course is for: