English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2 Hours | 314 MB
This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
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.
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.
Table of Contents
Welcome To The Flexbox Course!
1 How To Make The Most Of This Course
Let’s Dive Right In_ Learn The Flexbox Basics
2 What is Flexbox and Why Should I Use It
3 What About Browser Support for Flexbox
4 How Do I Use Flexbox
5 Flexbox Principles
Styling Flex Containers
6 flex-direction – Creating Row & Column Layouts
7 justify-content – Justifying Items Along the Main Axis
8 align-items – Aligning Items Along the Cross Axis
9 flex-wrap – Multiple Rows & Wrapping Inside Flex Containers
10 align-content – Justifying Content Along the Cross Axis
Designing Flex Items
11 order – Reordering Flex Items
12 align-self – Stubborn Children
13 flex-grow – Letting Children Grow
14 flex-shrink – Shrinking Flex Items
15 flex-basis – Setting the Base Size
Flexbox in Practice
16 Flexbox Grids Creating Responsive Galleries #1 (Minimal Code)
17 Flexbox Grids Creating Responsive Galleries #2 (Extra Flexibility)
18 Real Vertical Centering with Flexbox (no more vertical-align)
19 The Media Object Pattern
20 The Holy Grail Layout
21 Flexbox Cheat Sheet
Where to go from here
22 A Quick Recap & What’s Next
23 Bonus Lecture Skyrocket Your Web Design Skills!
Resolve the captcha to access the links!