Learn CSS Flexbox in 6 Minutes
ฝัง
- เผยแพร่เมื่อ 3 มิ.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
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.
You should try Kevin Powell's tutorials. It helps me a ton
Your attention span is so low mate
you havent seen "slaying the dragon" then. Ramzi is a CSS God.
This is the tutorial we always needed but never had!!!!
Will recommend it to anyone who wants to learn flex-box😙
Can you please make a video on grid layout it still haunts me to this day 😅
Dude, welcome to TH-cam. Instant subscribe. I have a feeling this channel is going to be great. Love your teaching style, your pace, and your voice. Thank you.
straight to the point, thanks😁
You're welcome!😀
Thank you 🙏🏻
Best. Thanks👍
I like how the thumbnail is impossible to do with flexbox.
Funnily enough, I did that in flexbox because I still don’t understand grid 😂
Wym, you can easily create it with flex box
Not impossible, just far more better to just use grids
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
Probably grid
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!
Thank you appreciate it 🙏🏽
I LIKE IT!
Flexbox and grid common part of every devs
Thanks
Do a same kind of video on grid please
Great video, i would suggest to increase your pace a little.
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