Latest Update: 05 December 2020


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:

  • Task 1: Align block elements horizontally
  • Task 2: Center item(s)
  • Task 3: Distribute space between items
  • Task 4: Push items to the bottoms
  • Task 5: Build Relative Size Column
  • Task 6: Build a Responsive layout with and without media query
  • Task 7: Change order (not common)
  • Task 8: Change the position of the item (not common)