Flexbox design patterns you can use in your projects

  Рет қаралды 445,938

Kevin Powell

Kevin Powell

Күн бұрын

Пікірлер: 449
@carstenberggreen7509
@carstenberggreen7509 Жыл бұрын
As always, totally easy explanations and very visually! Keep it up Kevin!
@KevinPowell
@KevinPowell Жыл бұрын
Thanks so much!
@ihavevoicesinmyhead9729
@ihavevoicesinmyhead9729 4 жыл бұрын
First name to search for when you need anything related to CSS.
@Allformyequine
@Allformyequine 4 жыл бұрын
For sure!!
@Kevthedev00
@Kevthedev00 4 жыл бұрын
FACTS!!!
@fonncatalina6464
@fonncatalina6464 3 жыл бұрын
SO TRUE!
@Elliot7676
@Elliot7676 3 жыл бұрын
fax
@re_allyedge
@re_allyedge 3 жыл бұрын
Wrong. He is the css 😎
@rektosaurus6552
@rektosaurus6552 2 жыл бұрын
im at the very beginning of my webdev journey and i gotta say your content and what you provide for us is priceless, I cant count the number of times I was struggling for hours then i come back to your videos and i find the solution , thank you so much !
@DannyLevan1
@DannyLevan1 3 жыл бұрын
Just wanna say I really like your videos. I've worked in web for close to 10 years and have never properly learned CSS and your videos are just so well made and easy to understand.
@GGdevelopment
@GGdevelopment 4 жыл бұрын
I still don't understand how you have less then 200K subs... You deserve more!
@emkisn
@emkisn 4 жыл бұрын
YESSS, i think the same. This channel is so rich in content
@jradplowman
@jradplowman 3 жыл бұрын
Dido...
@samueljun
@samueljun 3 жыл бұрын
done.
@layeekromah4799
@layeekromah4799 3 жыл бұрын
I think it's because most people overlook the role of CSS until they really need it.
@Kevinproducciones2
@Kevinproducciones2 3 жыл бұрын
Now he has 267.000 in less than 4 months
@akshaymondal1372
@akshaymondal1372 2 жыл бұрын
Before diving into web development I went through lots of articles in quora , most of the articles were related to css and all of them said that css is just bullshit , not possible for everyone to cope up with it . It created too much hype in our community that it actually crated fear in out hearts . But I didn't have any option, so I started with html css . And then I came across the great kevin powell. You don't know how much you have contributed in my life.
@sirharis7462
@sirharis7462 3 жыл бұрын
I’ve been winging it with flex for a while and spending countless hours debugging and guessing to make things work with flex but after this overview on the basics, I have a better understanding of flex and how to approach the styling. Nice video, great breakdown.
@etch_kay
@etch_kay 3 жыл бұрын
Thanks a ton, lol I was taking ss from your video just to keep a cheat sheet and you offered it, you're probably the best teacher on KZbin... thanks a ton
@firedforfighting
@firedforfighting 3 жыл бұрын
The CSS God....I spent hours yesterday trying to wrap my head around something like gridish...I sort of gave up but I was so close!!!...You really make CSS cool these vids are a lifesaver
@xphstos_
@xphstos_ 4 жыл бұрын
I don't know what it is but you're in my head!!! I was exploring some ways to reduce my media queries while I was working on a project I used this gridi-sh example. But Kevin, when I say you're in my head I mean it! This keeps happening for months now! I find something new and then BOOM here's a new video with you playing with the same stuff!
@daveskye
@daveskye 4 жыл бұрын
For spacing margin works well and then you don't have browser compatibility problems. .parent { margin: -1rem} .child {margin: 1rem;} By adding a negative margin to the parent then you don't lose the width. This method works well when using flex wrap.
@devsoldier4345
@devsoldier4345 4 жыл бұрын
I love your videos. Everytime I get stuck on something and I search youtube it's always one of your videos that get me back on track.
@felixjimenezgonzalez9292
@felixjimenezgonzalez9292 3 жыл бұрын
First of all, great video! Everytime I need to refresh flexbox you're the first person I come to!
@musabas5341
@musabas5341 4 жыл бұрын
I don’t really understand those dislikes. They might have clicked by mistake. Thank you so much Kevin. Another great video. 👍
@edilebert
@edilebert 4 жыл бұрын
You are the nicest KZbinr I've ever seen Mr. Powell! I love watching your content! So wholesome
@KevinPowell
@KevinPowell 4 жыл бұрын
Thanks so much 😊
@bryanperez3668
@bryanperez3668 Жыл бұрын
Great! The content sidebar section is exactly what i need, in my job they are using float and width instead of flex-basis so that a field is more large than the next one. Thanks for that
@sscip88
@sscip88 3 жыл бұрын
Found this guy TODAY!!!! ONLY TODAY!!! THANK YOU Kevin!
@JustPlaytheTrack
@JustPlaytheTrack 3 жыл бұрын
It never fails. I come to one of these videos for a specific technique, and end up deleting my entire style sheet.
@philipdufour7233
@philipdufour7233 3 жыл бұрын
🤣🤣
@abbassher201
@abbassher201 4 жыл бұрын
Its feel amazing everytime seeing your's video notification on youtube . Thanks alott Sir
@jessiz-
@jessiz- 2 жыл бұрын
Super helpful - I love the way you teach and go through these concepts. It makes thinking about flexbox so much simpler. grid-ish seems really useful. Thanks Kevin!
@parthparmar9798
@parthparmar9798 2 жыл бұрын
every time i get to your video i learns atleast one awesome trick to make my projects more effective. so thanks for that.
@sumkitteh
@sumkitteh Жыл бұрын
This is great, thank-you so much! I was actually in the process of going through a number of your (older?) videos seeking to extract precisely this information - I had very recently started using the flex-box patter you named "grid-ish" after seeing your description of it regarding the use of flexbox - there was no 'grid-ish' name, in that video, but from my experimentnig with it I recognized the patterns from the video icon image on this one, and this one answers a number of the guestions I had about how to constrain the flex box (e.g. column width's etc- so - thanks again - I am really enjoying your videos
@alexweb9974
@alexweb9974 4 жыл бұрын
Great work Kevin. Very well put together, straight to the point video. I also took you responsive design course which was great. Thanks for sharing your knowledge!
@ayushbali
@ayushbali 2 жыл бұрын
Kevin you're awesome, I used to fear CSS and everytime I tried making layouts I used to quit out of frustration, these videos of yours are great and I'm starting to understand things now. Thankyou!!
@JimKernix
@JimKernix 4 жыл бұрын
Great video - love these settings. BTW, I took your free 21-day responsive layout course this Summer, and now building a responsive site is a piece of cake. I just got my site up and I need to fix some designs that I don't like but it looks good on a smartphone. I started out though NOT building via responsive first - that was a mistake. I ended up building my last 2 pages responsive first and it was easy - now I have to go back and clean up the mess I made from building desktop first...
4 жыл бұрын
Little details like that ch unit totally have my mind blown :-O
@AnthonyDev
@AnthonyDev 3 жыл бұрын
Now, always I have any doubt about css I come to this channel, since I watched the king of css battle video this is my favorite css channel. I'm improving my flexbox skills. :)
@nikhiltyagi6619
@nikhiltyagi6619 3 жыл бұрын
One of the best videos that you have made. Thank you so much man! You rock!
@dregavero
@dregavero 3 жыл бұрын
Kevin you are a amazing! 👏 thank you for explaining these css scenarios in easy to understand manners, it really helps a lot , because responsive design is such a vital part of web dev, but also such a hard one, especially for newer developers⭐
@omniosi
@omniosi 3 жыл бұрын
Best explanation i've seen so far. It also makes me feel better that he types about as a bad as I do. ;)
@waleedsharif618
@waleedsharif618 3 жыл бұрын
Now you seems to be my way to go if i need to check some css tricks, i hope you keep making these videos
@capogocrazy6125
@capogocrazy6125 3 жыл бұрын
this guy is literally a life saver.
@sheldonfourie5959
@sheldonfourie5959 3 жыл бұрын
It's thanks to this guy I did my first free Lance job and then landed a good job
@KevinPowell
@KevinPowell 3 жыл бұрын
Nice! Congrats 🎉
@hassanjaved1147
@hassanjaved1147 2 жыл бұрын
Amazing stuff. I have been looking for this precious info for almost a month. You saved our back :) Thank You.
@dannyr2976
@dannyr2976 3 жыл бұрын
I'm new to the channel but learned so much about the awesome power of Flexbox! Thank you so much for sharing!
@wolfenrico
@wolfenrico 4 жыл бұрын
This is real magic! Thank you so much. Have a wonderful new year 2021!
@hyfydistro
@hyfydistro 4 жыл бұрын
Flexbox has "gap" property now?!! 😍 Thank you!! I always find something new in your videos!
@mingde893
@mingde893 3 жыл бұрын
Take my sub, you really deserve it. thanks alot mate. Hope that your channel blows up
@EmmaSelby89
@EmmaSelby89 3 жыл бұрын
Thanks!
@KevinPowell
@KevinPowell 3 жыл бұрын
Thank you so much!
@avimehenwal
@avimehenwal 3 жыл бұрын
You are awesome :) Quality over Quantity my man, you are doing way better than other youtubers XD I am a fan
@PremiumTechReviews
@PremiumTechReviews Жыл бұрын
Outstanding teacher and seems to be a very nice guy in the real life. Thank you Kevin, for all the great things you do!
@iamjustine1
@iamjustine1 2 жыл бұрын
Really the CSS king!! Thanks for the knowledge!
@sjohn2924
@sjohn2924 4 жыл бұрын
This is what i wait for :) probably last year of the video and it makes me happy. Thanks Kevin. We hope that 2021 will be great for everyone. Kevin also I want to see more updated video about old topic with new trend like css position on cutting edge effect etc.
@tyronefrielinghaus3467
@tyronefrielinghaus3467 2 жыл бұрын
Hi Kevin...thanks for a super tutorial. Very clear. Also you've got a good voice for it too. Good pacing and step by step..... Oh and thanks for the pdf too...helps after watching to reinforce 👍 Best wishes Tyrone.
@mohan9285
@mohan9285 4 жыл бұрын
It was a brushing up video for me on Flexbox properties, Thank you Kevin :) I love to see more videos on CSS Animations...
@rachanaa6745
@rachanaa6745 3 жыл бұрын
most amazing video in recent times which I have watched to learn Flexbox.... thanks so much Sir... All The best !
@Elliot7676
@Elliot7676 3 жыл бұрын
You're the real genius of css
@muhammadzaakirmungrue3146
@muhammadzaakirmungrue3146 2 жыл бұрын
I have watched many I think your the best CSS teacher on KZbin. Thanks , things get messy when I have a with a few icons and tags and I need to add a dropdown with a title in that and centre it.
@rezarahman1782
@rezarahman1782 4 жыл бұрын
It's really cool that how you manage to minimize the use of media query.Hat's off sir!😍
@lawrencepsteele
@lawrencepsteele 4 жыл бұрын
Perfect timing, I'm currently working on a project where I might be able to use the content-sidebar idea to streamline my classes a touch.
@worldclasscode1847
@worldclasscode1847 2 жыл бұрын
Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.
@shahbokhari
@shahbokhari 3 жыл бұрын
Always learn something new from Kevin's HTML, CSS & JS videos. He's a PRO and a Hero. We are all getting old!
@AWM_2023
@AWM_2023 4 жыл бұрын
December 30th and you’re keeping the beat. Thanks for the great videos. And happy new year!
@KevinPowell
@KevinPowell 4 жыл бұрын
Happy new year to you as well!
@seeithappen1
@seeithappen1 Жыл бұрын
Thanks for showing this. Yes I agree that Flex is really amazing and personally I prefer it above css grid what is actually overkill.
@KevinPowell
@KevinPowell Жыл бұрын
I actually use grid way more often 😂 But flex is still great at what it does!
@orincywhytedesigns
@orincywhytedesigns 3 жыл бұрын
I can’t wait to support you further than watching your videos!! You are a great teacher can’t wait to join the Patreon!!
@michalroesler
@michalroesler Жыл бұрын
And an enormous thank you 4 teaching me modern CSS.
@silverhakusho
@silverhakusho Жыл бұрын
Thank you for your videos. They've been an invaluable resource in my web development learning journey
@jeffborges101
@jeffborges101 4 жыл бұрын
Awesome stuff Kevin! Thank you very much. I am back on dev again after some days in pause mode . I will get back to your classes on CSS demystified tomorrow morning ! Happy new year to you and family !
@insomniomicron3297
@insomniomicron3297 2 жыл бұрын
Amazing stuff Kevin! Thanks for this!
@kennethgan1333
@kennethgan1333 3 жыл бұрын
all hail to the Css King!Such a life saver!
@louisgamor
@louisgamor 4 жыл бұрын
What will I do without your tutorials? !!😩😍
@digigoliath
@digigoliath 3 жыл бұрын
Love this. Super Awesome!! TQVM!
@juanvia8394
@juanvia8394 2 жыл бұрын
Flexbox design patterns I surely will use in my projects. Thank you for that.
@wlancer8826
@wlancer8826 3 жыл бұрын
Watching your videos for two hours straight! Having me question myself for studying HTML and css for two years and what!??
@wetsand7379
@wetsand7379 4 жыл бұрын
I'm addicted to learning CSS because of you!
@dindoleonard
@dindoleonard 3 жыл бұрын
wow you really are king of CSS
@louiscorbeil7775
@louiscorbeil7775 4 жыл бұрын
Great video, as usual, and nice glasses. Have a fantastic 2021!
@somepersonalconsiderations
@somepersonalconsiderations 3 жыл бұрын
Absolutely on the edge, creative us of code for Flexbox, very interesting solutions and I hope Safari 15 will support gap too
@haskomeyer4924
@haskomeyer4924 4 жыл бұрын
You could try applying display:hidden; on the glasses (not none so they stay in the flow of course). Unfortunately, it was not supported yet when I last tried. But they look good anyways.
@maxxernB
@maxxernB 3 жыл бұрын
thanks for the help, you make web-design learning much easier for me
@Glebsoloviov
@Glebsoloviov 3 жыл бұрын
Awesome tutorial. I love the step-by-step introduction and also possible problems examples. Thanks a bunch. Liked and Subscribed!)
@judericketts2494
@judericketts2494 3 жыл бұрын
Brilliant, thank you Kevin. I'm just starting my journey on flexbox.
@tulsiraj1998
@tulsiraj1998 3 жыл бұрын
Awesome thanks Kevin for video on flexbox.
@banderamusicaltv
@banderamusicaltv 2 жыл бұрын
Thanks Kevin , You really helped me out today
@frankiejrey
@frankiejrey 3 жыл бұрын
I use Grid to create layouts and flex when I want anything inline. Great tutorial.
@0xander_
@0xander_ 3 жыл бұрын
Happy that I've found your channel. Liked and subscribed!!
@MrViciousway
@MrViciousway 3 жыл бұрын
Life saver 🙌🏼 helped a lot, seen you on web dev simplified css quiz episode 😁✌🏼 actually thought that was hilarious and very informational.
@josepotgieter8275
@josepotgieter8275 3 жыл бұрын
Exactly what I needed for my current project. Thanks
@alexax3888
@alexax3888 8 ай бұрын
I appreciate this demos, keep it up!
@ramyokasha3092
@ramyokasha3092 3 жыл бұрын
thank you for all your tips and tutorials , you are a living treasure bro
@donghyuk80
@donghyuk80 3 жыл бұрын
Thank you for brief explanation!
@cwsoft8428
@cwsoft8428 4 жыл бұрын
Hi Kevin. Just found your channel some days ago. Very impressed. Wished I joined much earlier. Great content, presented in a very impressive and concise way. Keep up your great work. Can‘t believe I missed you for the last four years. What a waste of time :-)
@md.mirazuddin364
@md.mirazuddin364 3 жыл бұрын
Time Saver tutorial again. Thanks a lot. Please keep it up.
@tehg33k
@tehg33k 3 жыл бұрын
Hey, I think the glasses look great! Thanks for the video, helpful as always. Take care Kevin!
@lisandrofrancucci2205
@lisandrofrancucci2205 3 жыл бұрын
You are an absolute hero
@michalroesler
@michalroesler Жыл бұрын
I have a question regarding the first part of the tutorial. The equal width Flexbox Columns part. What if there are only 2 columns and there is a text in the first column and and image in the 2nd column. I have a problem like this in the moment. The second column with the image is much wider than the first column with the text - maybe because the image is pretty big. The solution from 2:31 "flex-basis: 100%" just doesn't work.
@abdul__rauf
@abdul__rauf 3 жыл бұрын
Fantastic Kevin as always. ❤️
@rentefald
@rentefald 3 жыл бұрын
You're not too old :) you are great!
@gunjanrajtiwari1435
@gunjanrajtiwari1435 2 жыл бұрын
The Gridish one is awesome. 😍
@brootaylor
@brootaylor 4 жыл бұрын
Thanks Kevin. As always great stuff and much appreciated.
@bizzistance
@bizzistance 3 жыл бұрын
Thanks so much! Very helpful!
@grizzlythresher7140
@grizzlythresher7140 2 жыл бұрын
I really wish I knew about this channel when this video came out. I am now a firm believer in the Church of Flex, but it has taken me a while to figure out what the hell I was doing. This video would have been So helpful to me then, and still has some really useful info.
@logiconabstractions6596
@logiconabstractions6596 2 жыл бұрын
For the 1st layout, minor quibble: flex-basis: 1fr; would work just as fine, but I find it a bit more precise. E.g. 100% somewhat makes me think "100% of... parent? they can't all do that". While 1fr makes ti clear it's 1 fraction of the available space for each.
@deadaccount6327
@deadaccount6327 3 жыл бұрын
i've never heard of the ch unit before thats reallly helpful
@ejirogheneobiuwevbi6012
@ejirogheneobiuwevbi6012 4 жыл бұрын
Super excited about this, thank you.
@shvideo1
@shvideo1 3 жыл бұрын
Excellent step-by-step video. Very informative and bare minimum. Great work. It would be nice to have the source code below so we can follow along with you. I know it's more work but this is all about hands-on learning, so it would be of great help. You used to do this!!
@tthompson9509
@tthompson9509 3 жыл бұрын
I feel smarter every time I watch your videos
@captaceospades0987
@captaceospades0987 3 жыл бұрын
I Always enjoy your content.
@samarharbieh4813
@samarharbieh4813 3 жыл бұрын
thank you for all the videos Kevin, so helpful. You are amazing!
@jasongoossens
@jasongoossens 3 жыл бұрын
A little VS Code trick to duplicate lines: Alt+shift+arrow up or down. If you select multiple lines, you can also duplicate them like this.
@KevinPowell
@KevinPowell 3 жыл бұрын
Yeah, that's a great one. I've set up a macro on my keyboard to do it because I'm lazy, lol.
Learn flexbox the easy way
34:04
Kevin Powell
Рет қаралды 731 М.
Learn CSS Subgrid in 14 minutes
14:19
Slaying The Dragon
Рет қаралды 91 М.
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.
The evil clown plays a prank on the angel
00:39
超人夫妇
Рет қаралды 53 МЛН
СИНИЙ ИНЕЙ УЖЕ ВЫШЕЛ!❄️
01:01
DO$HIK
Рет қаралды 3,3 МЛН
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 749 М.
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 271 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 183 М.
Stop animating box-shadows the wrong way!
14:38
Kevin Powell
Рет қаралды 34 М.
10 modern layouts in 1 line of CSS
21:39
Chrome for Developers
Рет қаралды 1,1 МЛН
My top 5 most popular front-end tips
22:07
Kevin Powell
Рет қаралды 68 М.
Why I use grid over flexbox for this common layout
7:32
Kevin Powell
Рет қаралды 238 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 145 М.
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
23 CSS features you should know (and be using) by now
31:31
Kevin Powell
Рет қаралды 82 М.
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.