Section 1 : Welcome To The Flexbox Course
|
|
Lecture 1 | INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM |
Section 2 : Let's Dive Right In Learn The Flexbox Basics
|
|
Lecture 1 | What is Flexbox and Why Should I Use It | 00:05:54 Duration |
|
|
Lecture 2 | What About Browser Support for Flexbox | 00:04:53 Duration |
|
|
Lecture 3 | How Do I Use Flexbox | 00:04:03 Duration |
|
|
Lecture 4 | Flexbox Principles | 00:04:54 Duration |
Section 3 : Styling Flex Containers
|
|
Lecture 1 | flex-direction - Creating Row & Column Layouts | 00:07:02 Duration |
|
|
Lecture 2 | justify-content - Justifying Items Along the Main Axis | 00:06:01 Duration |
|
|
Lecture 3 | align-items - Aligning Items Along the Cross Axis | |
|
|
Lecture 4 | flex-wrap - Multiple Rows & Wrapping Inside Flex Containers | |
|
|
Lecture 5 | align-content - Justifying Content Along the Cross Axis | 00:03:03 Duration |
Section 4 : Designing Flex Items
|
|
Lecture 1 | order - Reordering Flex Items | 00:02:41 Duration |
|
|
Lecture 2 | align-self - Stubborn Children | |
|
|
Lecture 3 | flex-grow - Letting Children Grow | 00:07:23 Duration |
|
|
Lecture 4 | flex-shrink - Shrinking Flex Items | |
|
|
Lecture 5 | flex-basis - Setting the Base Size |
Section 5 : Flexbox in Practice
|
|
Lecture 1 | Flexbox Grids Creating Responsive Galleries #1 (Minimal Code) | 00:10:24 Duration |
|
|
Lecture 2 | Flexbox Grids Creating Responsive Galleries #2 (Extra Flexibility) | 00:06:16 Duration |
|
|
Lecture 3 | Real Vertical Centering with Flexbox (no more vertical-align) | 00:06:08 Duration |
|
|
Lecture 4 | The Media Object Pattern | 00:11:49 Duration |
|
|
Lecture 5 | The Holy Grail Layout | 00:10:27 Duration |
|
|
Lecture 6 | Flexbox Cheat Sheet |
Section 6 : Where to go from here
|
|
Lecture 1 | A Quick Recap & What's Next | 00:03:51 Duration |
