Learn CSS Flexbox in 6 Minutes

Подписаться 601

Просмотров 26 тыс.

50% 1

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

Наука

Опубликовано:

15 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@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 11 месяцев назад

Your attention span is so low mate

@royandescartes 11 месяцев назад

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 RU-vid. 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 17 дней назад

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 15 дней назад

Probably grid

@franznbr6591 Год назад

straight to the point, thanks😁

@amin-mousavi Год назад

You're welcome!😀

@studioak90 7 часов назад

Flexbox and grid common part of every devs

@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 11 месяцев назад

Thank you appreciate it 🙏🏽

@AntiMen0 4 месяца назад

I LIKE IT!

@juhairahamed5342 Месяц назад

Thanks

@ryuk_shinigami 11 месяцев назад

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

@shakilahmed6870 11 месяцев назад

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