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

[@bluehawkfire55]

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.

[@josh27ofto]

You should try Kevin Powell's tutorials. It helps me a ton

[@zaid4708]

Your attention span is so low mate

[@royandescartes]

you havent seen "slaying the dragon" then. Ramzi is a CSS God.

[@schubertafonso8392]

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

[@schubertafonso8392]

Can you please make a video on grid layout it still haunts me to this day 😅

[@cm3462]

Dude, welcome to KZbin. 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.

[@rarizalx]

Funnily enough, I did that in flexbox because I still don’t understand grid 😂

[@e.vilcorp]

Wym, you can easily create it with flex box

[@sanjeevsinghrajput5593]

Not impossible, just far more better to just use grids

[@xreed8]

You just need to define widths on each square/rectangle in the grid and give wrap to flex-wrap. However you’re right in the sense that you can’t fix the grid’s columns and rows though with flexbox

[@iamtharunraj]

Probably grid

[@franznbr6591]

straight to the point, thanks😁

[@amin-mousavi]

You're welcome!😀

[@9To5Digitale]

Thank you 🙏🏻

[@bogush31]

Best. Thanks👍

[@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!

[@amin-mousavi]

Thank you appreciate it 🙏🏽

[@AntiMen0]

I LIKE IT!

[@juhairahamed5342]

Thanks

[@ryuk_shinigami]

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

[@shakilahmed6870]

Do a same kind of video on grid please

[@shivaamchourasia]

Great explanation. Could please answer this. I was asked to do this in interview. HTML ---------- Sample paragraph Heading One ----------- 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