#36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial

🙂SUBSCRIBE - hit the bell 🔔and choose all: https://goo.gl/nYLZvz 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 #cssflexbox #cssflexboxtutorial This lesson is part of a wider CSS Full Tutorial which you find here: shorturl.at/muIKS SUBSCRIBE and hit the BELL NOTIFICATION 🔔: https://goo.gl/nYLZvz ------------------ 👈 😃 PREVIOUS VIDEO: https://www.youtube.com/watch?v=Ya4EH0e2P9k ------------------ 👍 CSS FULL TUTORIAL: https://www.youtube.com/watch?v=FFOQRK1K7N0&list=PL7TLF4T4Tq2RCWa-ZRkEWXVtXteyZ2CjK ------------------ 👍 HTML FULL TUTORIAL: https://www.youtube.com/watch?v=0e24EcNapsA&list=PL7TLF4T4Tq2RNvYzF45yOeFi-O1KRAWtu ------------------ Text editor used in this lesson: Brackets - http://brackets.io/ ------------------ FACEBOOK: https://www.facebook.com/devdreamercode TWITTER: https://twitter.com/DevDreamerCode SUBSCRIBE and hit the BELL NOTIFICATION 🔔: https://goo.gl/nYLZvz ------------------------------------------------------------------------------------ Learn with Dev Dreamer! Step by step and simple to understand :-)