Complete Flexbox Course: Learn CSS3 Flexbox in 2020
- 2 hours on-demand video
- 2 articles
- 4 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business- 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
- Basic HTML & CSS
- Using a code editor
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!
More goodies inside this course:
I'll answer all questions you may have along the way to make sure you reach your learning goals
I've added manual, high-quality captions (CC) to this course
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 various 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:
flex-direction
justify-content
align-items
flex-wrap
align-content
Then individual flex items:
order
align-self
flex-grow
flex-shrink
flex-basis
flex
At the end, we'll look at real-world Flexbox examples to see what kinds of layouts can be achieved:
Simple grids with Flexbox where all columns in a row have the same size
More advanced Flexbox grids where columns can have arbitrary sizes
Vertical centering to vertically align any element
Media objects, the popular OOCSS pattern
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.
- 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
Thanks so much for joining this course!
Now, let's make sure you get the most out of this course :)
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.
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.
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.
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.
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;
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;
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;
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;
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;
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.
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
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
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)
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.
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.
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.
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 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.