Learn CSS Flexbox in 6 Minutes

In this video, you'll learn how to create flexible layouts using CSS Flexbox in just 6 minutes. We'll look at key properties such as flex-direction, flex-wrap, flex-grow, flex-shrink, and flex-basis. Finally, I'll show you how to align and distribute items along the main and cross axes using justify-content and align-items.

Video content:
00:00 Flex
00:15 Inline-flex
00:25 Flex-direction
01:05 Wrap
01:37 Flex-grow
02:43 Flex-shrink
02:57 Flex-basis
03:32 Flex shorthand
04:28 Justify-content
05:10 Align-items

[bluehawkfire]

finally, a flex tutorial that isnt 20mins long. I've been starting to hate CSS and rethinking if I even want to do front-end. I figured I should stick it out a little longer and it'll get easier and more enjoyable. This was really simple and to the point.

[schubertafonso]

This is the tutorial we always needed but never had!!!!
Will recommend it to anyone who wants to learn flex-box😙

[rameenana]

Love your video man. I was looking for a proper flex box tute for someone I’m sorta mentoring and every bloody video is full of unnecessary crap and so long. Your video is to the point, good pace for a beginner, and the way the IDE is laid out is very easy to visually follow.

Thanks a lot and since you didn’t ask me to like, subscribe, and share, I’m definitely gonna do that.

Please stick to this method of tutorial making and I promise you’ll have a massive following.

Appreciate your work. Cheers mate!

[cm]

Dude, welcome to YouTube. Instant subscribe. I have a feeling this channel is going to be great. Love your teaching style, your pace, and your voice. Thank you.

[donniedamato]

I like how the thumbnail is impossible to do with flexbox.

[studioak]

Flexbox and grid common part of every devs

[ryuk_shinigami]

Great video, i would suggest to increase your pace a little.

[shivaamchourasia]

Great explanation.

Could please answer this. I was asked to do this in interview.

HTML
—————————-
<!-- Make both elements width align -->
<p>Sample paragraph</p>
<h1>Heading One</h1>
———————————

CSS
——————————-

p {width: 220px; padding: 10px; background: gray; }

h1{width: 220px; background: green; }


-> i was told to make this align without changing the width

Could you please answer this or make a video on this

[shakilahmed]

Do a same kind of video on grid please