Learn Flexbox with 8 Use Cases in 12 Minutes | CSS Tutorial 2021

Опубликовано: 09 Ноябрь 2024
на канале: Thu Nghiem

7,512

235

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/tutori...

_________ 🔖 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

_________ 🐣 About me _________

I am the founder of https://devchallenges.io/
Follower my Twitter / thunghiemdinh
Join / discord