Learn CSS Flexbox in easy way

Hi, today's video is dedicated to flexbox, one of the most difficult topics in CSS! But despite this, flexbox can be studied - and it's 100 times easier to do it with me, because I've already collected all the properties and values in one place and added cool animations.

I've been teaching people web development on my instagram for a year and a half and now I have about 76k followers. I mostly do CSS guides and have helped tens of thousands of people.

I've now transformed the lives of over a hundred people by writing my book "Recharge your CSS".

Music:
Lo Fi Type Beat - Lovesick (copyright free)
Lo Fi Type Beat - Sweetheart (copyright free)

Timestamps:
00:00 Intro
00:25 display: flex
00:46 flex-direction
00:57 justify-content
1:30 align-items
1:47 flex-wrap
2:08 gap
2:16 align-content
2:50 order
3:09 flex-grow
3:30 flex-shrink
3:43 flex-basis
3:59 "flex" shorthand
4:09 align-self
4:22 Summarize
4:49 My e-book

[cssiseasy]

💥Are you struggling with CSS and want to improve your knowledge?

[-Barny]

Crazy amount of information in less than 5 min. Thank you, Sir ❤

[cactus]

You have a talent. Just explained an important css topic and made it easy to begin understood.

[sheikhspeare]

Note that the main axis is always defined by the flex-direction. If direction is row, main axis is horizontal (x-axis in 2D coordinates) and if it's column, the main axis is vertical. The cross axis will be perpendicular to it.

Also, the direction of justify and align properties depends on this as well.

[amrsaber]

there is no such value `space-equal` the correct is `space-evenly` please prepare well before doing such mistakes!

[navymiguelito]

"ancestors"? Oof. When CSS first came into play, web dev leveled-up its game. I started in '95 using PageMill. Damn, I am old. Hahaha!

[arifkasim]

Extremely intuitive when you explain it like this. You need to follow this format to explain other topics also. Congratulations!

[Zionnod]

Simple, practical, helpful, thanks!

[royandescartes]

you sir just earned my sub. thank you. although i have beaten flex garden many times before, (flex: wrap-reverse; had me stuck for a while lol) it is ALWAYS good to keep the mind sharp with new tutorials and lessons on web development. THANK YOU

[reicchi]

Such a great and straightforward video, your delivery is very clear and examples are understood right away.
Will you perhaps be making one on Grid layout as well?

Looking forward to more of your videos!

[jyotiprakashboruah]

Great video, covers all the topics. Thank you.

[TheManiacc]

This is awesome you made it easy to understand in a short time

[mateusb]

The keyboard sound was annoying/repetitive but other than that it was a wonderful video

[sankalpsharma]

Keep this series going bro, full support from me (only mentally😉, not physically 💸😏)

[CherryMakesGameplays]

content so good, that algorithm showed me thus even though you have less views and subs!!

[waleedbinshabbir]

I loved this, how do you have so few subscribers

[danielimatteo]

This is amazing! How do you edit these videos and animations??

[gaminghunter]

What you use for video creation because these animations are cool, but keyboard sound is distributing 😅

[zaifhossain]

Create video on Grid Layout and Advance Animation

[vseybdt]

One question, whats the point of flex basis exactly?