The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017
4.7 (150 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.
3,774 students enrolled
Wishlisted Wishlist

Please confirm that you want to add The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017 to your Wishlist.

Add to Wishlist

The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
Bestselling
4.7 (150 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.
3,774 students enrolled
Created by Peter Sommerhoff
Last updated 3/2017
English
Current price: $10 Original price: $95 Discount: 89% off
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 2 Articles
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Use CSS Flexbox confidently to create modern layouts
  • Create web site designs more effectively
  • Write high-quality and reusable CSS code
  • Vertically align any element
  • Take up the remaining space in a container
  • Beautiful responsive galleries with Flexbox
  • Implement the so-called Holy Grail Layout
View Curriculum
Requirements
  • Basic HTML & CSS
  • Using a code editor
Description

After this course, you'll be able to use Flexbox to...

  • vertically align any element
  • create modern grids
  • take up remaining space
  • add spacing between elements
  • implement complete site layouts
  • and much more!

 

Inside the course, I'll answer all questions you may have along the way.

To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects.


What Students Say About Me (taken from other courses of mine)

Such a great course. second one for me with Peter Sommerhoff.
a great Instructor, uses very easy way to explain the materials.

- Ahmed


I absolutely LOVE this course, it teaches everything you need in details
and more! They really do listen to their students and answer as fast as
the road runner. Thanks so much for posting your course and I am
looking forward other courses!

- Ana


Great course, Peter explained it thoroughly, and he answers any questions within a day.

- Dunja


The course covered the required information quickly and concisely
without fluff or wasted motion. It provides sufficient pointers to
additional information and documentation. I thought it was a good
value.

- Robert


I'm glad to have received such great reviews from my students -- and I'll do my best to provide you with the best learning I can as well.


Check out the free preview videos below.

I look forward to seeing you inside :)



***


In this tutorial, you'll learn to use each and every Flexbox property:

Styling flex containers:

  1. flex-direction
  2. justify-content
  3. align-items
  4. flex-wrap
  5. align-content

Then individual flex items:

  1. order
  2. align-self
  3. flex-grow
  4. flex-shrink
  5. flex-basis
  6. flex

At the end, we'll look at real-world Flexbox examples to see what kinds of layouts can be achieved:

  1. Simple grids with Flexbox where all columns in a row have the same size
  2. More advanced Flexbox grids where columns can have arbitrary sizes
  3. Vertical centering to vertically align any element
  4. Media objects, the popular OOCSS pattern
  5. The Holy Grail Layout, a complete site layout with sidebars and sticky footer


As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox.

Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.

Who is the target audience?
  • Web designers and developers who want to improve their frontend skills
  • Designers who want to increase their productivity
  • Anyone who wants to keep up with newest developments in web standards
Curriculum For This Course
23 Lectures
02:07:51
+
Welcome To The Flexbox Course!
1 Lecture 04:24

Thanks so much for joining this course!

Now, let's make sure you get the most out of this course :)

Preview 04:24
+
Let's Dive Right In: Learn The Flexbox Basics
4 Lectures 19:42

Learn about what Flexbox is and what you can do with this new CSS box model to make your job easier and work more productively.

Preview 05:53

Flexbox is supported by 97.5% of users worldwide (Feb 2017, caniuse.com) with prefixing. Only IE 10 and below, and old Android browsers are not supported.

Thus, you can now finally start using Flexbox for most audiences to use very concise and beautiful solutions for tasks that have been unnecessarily complicated before.

Prefixing can be done using intelligent code editors, online tools, or build tools.

What About Browser Support for Flexbox?
04:53

There is no setup required to use Flexbox, it's part of the CSS 3 standard and not a framework or library. Of course you should have a code editor that knows Flexbox and can offer autocomplete etc., such as Sublime Text, Atom or an IDE.

Preview 04:02

Flexbox uses the concepts of main axis and cross axis. If the flex container is defined as a row, the main axis will be horizontal and the cross axis thus vertical. If the container is a column layout (defined via flex-direction later), it's the other way around.

The cross axis is always perpendicular to the main axis.

It's important to understand this concept to know what the effect the Flexbox properties will have later on in this course.

Flexbox Principles
04:54

This is your chance to test your knowledge of this section!

Quiz: Flexbox Basics
3 questions
+
Styling Flex Containers
5 Lectures 24:46

In Flexbox, you can define the flex container to have a row or column layout using either flex-direction: row or flex-direction: column.

Also, if you want the flex container to be filled from the end of the main axis (e.g. from the right in a row), you can add reverse to the values: flex-direction: row-reverse or flex-direction: column-reverse.

Valid values are:

  • flex-direction: row;  (default)
  • flex-direction: column;
  • flex-direction: row-reverse;
  • flex-direction: column-reverse;
Preview 07:02

Let's see if you can recall the most important info about flex-direction.

Quiz: flex-direction
2 questions

With justify-content, you can specify how flex items will align along the main axis and what spacing they'll have.

Valid values are:

  • justify-content: flex-start;
  • justify-content: flex-end;
  • justify-content: center;
  • justify-content: space-around;
  • justify-content: space-between;
justify-content - Justifying Items Along the Main Axis
06:01

Try recalling what's essential about justify-content.

Quiz: justify-content
3 questions

With align-items, flex items can be aligned along the cross axis. For example, align them at the top or bottom (of a row).

Valid values are:

  • align-items: stretch;
  • align-items: flex-start;
  • align-items: flex-end;
  • align-items: center;
  • align-items: baseline;
Preview 04:05

Test your knowledge of the align-items property!

Quiz: align-items
3 questions

To create multiple rows or columns, you can enable flex-wrap by using either wrap or wrap-reverse as the default, in contrast to the default value nowrap.

This way, flex items will flow into the next or column once it would overflow. With flex-wrap: nowrap, it may well happen that your flex container will overflow.

Valid values are:

  • flex-wrap: nowrap;  (default)
  • flex-wrap: wrap;
  • flex-wrap: wrap-reverse;
flex-wrap - Multiple Rows & Wrapping Inside Flex Containers
04:35

Test what you just learned about flex-wrap!

Quiz: flex-wrap
2 questions

Once you have multiple rows or columns, you will probably want to control the alignment and spacing of these rows/columns. This is exactly what align-content is for, which is essentially the same as justify-content but for the cross axis. Thus, align-content only makes sense once you have more than one row or column.

Valid values are (same as justify-content):

  • align-content: flex-start;
  • align-content: flex-end;
  • align-content: center;
  • align-content: space-around;
  • align-content: space-between;
align-content - Justifying Content Along the Cross Axis
03:03

Check your knowledge about align-content!

Quiz: align-content
2 questions
+
Designing Flex Items
5 Lectures 26:56

With order, you can change the order of your flex items independent of their actual order in the HTML markup. This allows for more dynamic layouts without relying heavily on JavaScript.

The default value for order is 0, thus you have to use a negative number to move an item to the front.

Valid values are:

  • All positive numbers, negative numbers, and zero.
Preview 02:40

In Flexbox, align-self allows you to override whatever basic layout you set via justify-content. Normally, you would of course do this only for specific flex items which should not follow the parent layout.

Valid values are:

  • same as justify-content
align-self - Stubborn Children
02:45

By default, flex items will not take up remaining space in their parent. With Flexbox, you can simply set flex-grow to 1 or above to allow a flex-item to fill remaining space.

If multiple flex items have flex-grow set to >0, the remaining space will be split up between them depending on their flex-grow number - the higher the number is, the more they will expand. For details about the calculation, check the video.

Valid values are:

  • 0  (default)
  • positive numbers
Preview 07:22

Check your knowledge on the flex-grow property, this one is essential!

Quiz: flex-grow
4 questions

If the flex container cannot contain all its items with their specified size, the flex items will by default be allowed to shrink in order to fit. However, Flexbox will only shrink items to some degree (depending on their content and padding) so the flex container may still overflow.

You can disable shrinking for flex items by setting flex-shrink to 0. Similarly, larger values for flex-shrink will make it shrink more compared to other items.

Valid values are:

  • 1  (default)
  • 0  (forbid shrinking)
  • all positive numbers
flex-shrink - Shrinking Flex Items
05:41

Test what you learned about flex-shrink in this quiz!

Quiz: flex-shrink
3 questions

In Flexbox, flex items will only adhere to width and height properties if there is no value for flex-basis specified. However, the best practice is to use flex-basis which will refer to width in row containers and to height in column containers.

When calculating the size of each flex item, the flex-basis value will be evaluated first. Only after that, flex-grow and flex-shrink will be used to divide up remaining (or overflowing) space.

Valid values are:

  • Any px, em, rem, % values (like you would to for width/height)
flex-basis - Setting the Base Size
08:28

Congrats for making it here.

Check what you learned about flex-basis, the last property of the Flexbox box model.

Quiz: flex-basis
4 questions
+
Flexbox in Practice
6 Lectures 45:11

This first solution for Flexbox grids uses minimal markup and CSS code but is already powerful enough for a majority of use cases.

Each grid row will be in its own container, with all elements spanning the same size inside the container via flex: 1. You can use this for teasers showing advantages of your product, review blocks or any other simple multi-column module.

Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)
10:23

In this solution, you'll create more flexible grids with Flexbox which use flex-wrap to create galleries with multiple rows in one flex container. Also, via classes with different flex-basis values, you'll be able to define how much space each flex item should take up.

This solution is for more advanced galleries where the items in one row should not necessarily be of the same size.

Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)
06:15

Ever tried vertical-align: middle to no avail? Well, it only works for inline elements and table cells. Finally, with Flexbox you can center any element with just one or two lines of code. This is one of the things that should have been possible in CSS right from the beginning.

Using a flex container and align-items: center, you're now able to vertically center any element inside a flex container. This tutorial shows you two different use cases for this.

Real Vertical Centering with Flexbox (no more vertical-align)
06:08

A media object is a module with a picture and some content, possibly nested. Think comment sections on a blog. It's a highly useful and reusable module made popular by the OOCSS approach (object-oriented CSS).

Here, you'll learn to easily create flexible media objects using Flexbox which are highly maintainable and fulfill more requirements than described above. In the video, we'll discuss all we want the media object to be able to do.

The Media Object Pattern
11:48

The Holy Grail Layout is essentially a 3-column layout with a header and a sticky footer where all columns should have equal height at all times, the footer should be sticky, and the HTML markup for the content should come before the markup for both sidebars.

Implementing this layout with CSS was only possible with some kind of compromise before. With Flexbox, you're finally able to use a Holy Grail Layout. In this lecture, I'll show you how.

The Holy Grail Layout
10:27

All properties of Flexbox in one PDF overview.

This is essentially a PDF version of the showcase, so you can always look at this interactively and even modify it using the showcase code.

Flexbox Cheat Sheet
00:10
+
Where to go from here...
2 Lectures 07:15

All you've learned in this course!

Let me know if you have any suggestions for another example of Flexbox in practice :)

A Quick Recap & What's Next
03:50

Check out other web design & development courses of mine for $10.

Bonus Lecture: Skyrocket Your Web Design Skills!
03:25
About the Instructor
Peter Sommerhoff
4.6 Average rating
1,322 Reviews
20,868 Students
4 Courses
Developer & Software Engineer - With 15,000+ Happy Students

Hi, it's Peter, glad you made it here! If you're anything like me, you want to always keep learning, master new skills, and ultimately achieve your life goals -- whether that's a well-paying career, traveling the world, working from the comfort of your home, or sharing your expertise with and helping other people.

Does that sound like you? Then make sure to enroll in one my courses and learn about awesome programming languages, software design, productivity, or anything else you're interested in!

I feel honored for every student I have and will make sure you have a great learning experience. You can always ask me personally if you get stuck or have anything at all I can help you with.

So please check out my courses below and I'll see you there!