Learning Flexbox CSS In 2022 (Crash Course)

This is a crash course to master flexbox CSS in 2022. In this tutorial, we start from the basics and learn everything about flex-containers and flex-items. Using different flex properties how we can create the desired layout of our website.

#flexbox #css #html

0:00 What is flexbox?
0:54 Basics & Terminologies - main axis & cross axis
2:35 Code Overview
3:39 Flex Container Properties
3:48 display: flex;
4:20 flex-direction: row | row-reverse | column | column-reverse;
5:24 flex-wrap: nowrap | wrap | wrap-reverse;
6:35 justify-content
7:31 align-items
8:36 gap, row-gap, column-gap
9:50 Flex item properties: order;
11:00 Flex item properties: flex-grow;
12:19 align-self: auto | flex-start | flex-end | center | baseline | stretch;