In this CSS Flexbox Tutorial - The Complete Guide, we’ll go through the entire CSS Flexbox layout module step by step with examples throughout. First we’ll take a look at what CSS Flexbox actually is, as well as some key components to flexbox such as understanding the main and cross axis.

Next, we take a deep dive into every single CSS Flexbox property, starting with the container properties and then moving on to the item properties.

Finally, we’ll put what we’ve learnt into practice by building two small projects: (1) A game card and (2) A nav bar menu.

Chapters:

• 0:00 - Intro
• 0:29 - What is CSS Flexbox?
• 1:20 - What can it do?
• 2:12 - All CSS Flexbox Properties
• 2:38 - The Main/Cross Axis
• 4:21 - Flexbox Container Properties
• 5:00 - flex-direction
• 5:42 - flex-wrap
• 6:50 - flex-flow
• 7:20 - justify-content
• 9:11 - align-items
• 10:55 - align-content
• 12:12 - Flexbox Item Properties
• 12:33 - order
• 14:03 - flex-grow
• 16:05 - flex-shrink
• 17:38 - flex-basis
• 20:00 - flex
• 20:50 - align-self
• 21:27 - Building a Game Card with Flexbox
• 23:57 - Building a Nav Menu with Flexbox
• 26:14 - Like and Subscribe

#css #web-development #programming #developer