One problem with many tutorials is that they try to teach you everything and forget to tell you WHEN and WHY to use it.

In this tutorial, I am going to show you the most common use-cases of Flexbox, and with that, you will learn everything needed for future projects.

We will learn flexbox by solving 8 tasks which are the 8 most common use cases of Flexbox.

You can download the starter: https://devchallenges.io/learn/tutorial/flexbox

__________ 🔖 Tutorial Structure __________

[00:00] - Introduction
[00:23] - Project walkthrough
[01:32] - Task 1: Align block elements horizontally
[02:20] - Task 2: Center item(s)
[03:57] - Task 3: Distribute space between items
[05:12] - Task 4: Push items to the bottoms
[07:13] - Task 5: Build Relative Size Column
[08:47] - Task 6: Build a Responsive layout with and without media query
[10:44] - Task 7: Change order (not common)
[12:02] - Task 8: Change position of the item (not common)
[12:43] - flex-direction: column
[13:27] - Happy Coding

#css #web-development #programming #developer