Тёмный

Flexbox design patterns you can use in your projects 

Kevin Powell
Подписаться 910 тыс.
Просмотров 433 тыс.
50% 1

Get your cheatsheet: flexbox-pattern-cheatsheet.ke...
Want to learn more about flexbox? flexboxsimplified.com
Flexbox is amazing, and I honestly feel like sometimes we're just stratching the surface with what we can do with it! In this video I explore three design patterns that you can use in your sites using flexbox.
In-depth gap video (including alternative for Safari): • Gap in flexbox & how t...
/// Timestamps
00:00 - Introduction
00:19 - even columns
04:31 - grid-ish
08:13 - content and sidebar
12:45 - spacing things out
#css #flexbox
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

 

22 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 444   
@ihavevoicesinmyhead9729
@ihavevoicesinmyhead9729 3 года назад
First name to search for when you need anything related to CSS.
@Allformyequine
@Allformyequine 3 года назад
For sure!!
@Kevthedev00
@Kevthedev00 3 года назад
FACTS!!!
@fonncatalina6464
@fonncatalina6464 3 года назад
SO TRUE!
@Elliot7676
@Elliot7676 3 года назад
fax
@re_allyedge
@re_allyedge 3 года назад
Wrong. He is the css 😎
@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 2 года назад
🤣🤣
@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.
@rektosaurus6552
@rektosaurus6552 Год назад
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 !
@GGdevelopment
@GGdevelopment 3 года назад
I still don't understand how you have less then 200K subs... You deserve more!
@emkisn
@emkisn 3 года назад
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
@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.
@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!
@alexweb9974
@alexweb9974 3 года назад
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!
@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⭐
@jeffb6291
@jeffb6291 3 года назад
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 !
@devsoldier4345
@devsoldier4345 3 года назад
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.
@mohan9285
@mohan9285 3 года назад
It was a brushing up video for me on Flexbox properties, Thank you Kevin :) I love to see more videos on CSS Animations...
@sirjohn2924
@sirjohn2924 3 года назад
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.
@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 RU-vid... 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
@JimKernix
@JimKernix 3 года назад
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...
@bryanperez3668
@bryanperez3668 10 месяцев назад
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
@ayushbali
@ayushbali Год назад
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!!
@abbassher201
@abbassher201 3 года назад
Its feel amazing everytime seeing your's video notification on youtube . Thanks alott Sir
@akshaymondal1372
@akshaymondal1372 Год назад
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.
@lawrencepsteele
@lawrencepsteele 3 года назад
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.
@xphstos_
@xphstos_ 3 года назад
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!
@wolfenrico
@wolfenrico 3 года назад
This is real magic! Thank you so much. Have a wonderful new year 2021!
@carstenberggreen7509
@carstenberggreen7509 11 месяцев назад
As always, totally easy explanations and very visually! Keep it up Kevin!
@KevinPowell
@KevinPowell 11 месяцев назад
Thanks so much!
3 года назад
Little details like that ch unit totally have my mind blown :-O
@dannyr2976
@dannyr2976 2 года назад
I'm new to the channel but learned so much about the awesome power of Flexbox! Thank you so much for sharing!
@Glebsoloviov
@Glebsoloviov 2 года назад
Awesome tutorial. I love the step-by-step introduction and also possible problems examples. Thanks a bunch. Liked and Subscribed!)
@sumkitteh
@sumkitteh 11 месяцев назад
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
@daveskye
@daveskye 3 года назад
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.
@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
@felixjimenezgonzalez9292
@felixjimenezgonzalez9292 2 года назад
First of all, great video! Everytime I need to refresh flexbox you're the first person I come to!
@rezarahman1782
@rezarahman1782 3 года назад
It's really cool that how you manage to minimize the use of media query.Hat's off sir!😍
@nikhiltyagi6619
@nikhiltyagi6619 3 года назад
One of the best videos that you have made. Thank you so much man! You rock!
@MrViciousway
@MrViciousway 2 года назад
Life saver 🙌🏼 helped a lot, seen you on web dev simplified css quiz episode 😁✌🏼 actually thought that was hilarious and very informational.
@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!
@sscip88
@sscip88 3 года назад
Found this guy TODAY!!!! ONLY TODAY!!! THANK YOU Kevin!
@insomniomicron3297
@insomniomicron3297 2 года назад
Amazing stuff Kevin! Thanks for this!
@samarharbieh4813
@samarharbieh4813 3 года назад
thank you for all the videos Kevin, so helpful. You are amazing!
@avimehenwal
@avimehenwal 3 года назад
You are awesome :) Quality over Quantity my man, you are doing way better than other youtubers XD I am a fan
@hassanjaved1147
@hassanjaved1147 Год назад
Amazing stuff. I have been looking for this precious info for almost a month. You saved our back :) Thank You.
@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!
@frankiejrey
@frankiejrey 3 года назад
I use Grid to create layouts and flex when I want anything inline. Great tutorial.
@AWM_2023
@AWM_2023 3 года назад
December 30th and you’re keeping the beat. Thanks for the great videos. And happy new year!
@KevinPowell
@KevinPowell 3 года назад
Happy new year to you as well!
@brootaylor
@brootaylor 3 года назад
Thanks Kevin. As always great stuff and much appreciated.
@Pavfixers
@Pavfixers 3 года назад
Thank you and Happy new year
@louiscorbeil7775
@louiscorbeil7775 3 года назад
Great video, as usual, and nice glasses. Have a fantastic 2021!
@tehg33k
@tehg33k 3 года назад
Hey, I think the glasses look great! Thanks for the video, helpful as always. Take care Kevin!
@judericketts2494
@judericketts2494 2 года назад
Brilliant, thank you Kevin. I'm just starting my journey on flexbox.
@ejirogheneobiuwevbi6012
@ejirogheneobiuwevbi6012 3 года назад
Super excited about this, thank you.
@abdul__rauf
@abdul__rauf 3 года назад
Fantastic Kevin as always. ❤️
@donghyuk80
@donghyuk80 2 года назад
Thank you for brief explanation!
@musabas5341
@musabas5341 3 года назад
I don’t really understand those dislikes. They might have clicked by mistake. Thank you so much Kevin. Another great video. 👍
@josepotgieter8275
@josepotgieter8275 2 года назад
Exactly what I needed for my current project. Thanks
@OrincyWhyteDesigns
@OrincyWhyteDesigns 2 года назад
I can’t wait to support you further than watching your videos!! You are a great teacher can’t wait to join the Patreon!!
@worldclasscode1847
@worldclasscode1847 2 года назад
Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.
@alexax3888
@alexax3888 Месяц назад
I appreciate this demos, keep it up!
@MoodNSoul
@MoodNSoul 2 года назад
Great explanation mate. I'm learning important stuff from you. keep it up!
@rachanaa6745
@rachanaa6745 2 года назад
most amazing video in recent times which I have watched to learn Flexbox.... thanks so much Sir... All The best !
@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.
@jimjurisvideos
@jimjurisvideos 2 года назад
Thank you for creating this wonderful video. It was very helpful to me and I learned a lot watching it.
@0xander_
@0xander_ 2 года назад
Happy that I've found your channel. Liked and subscribed!!
@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.
@ramyokasha3092
@ramyokasha3092 3 года назад
thank you for all your tips and tutorials , you are a living treasure bro
@mingde893
@mingde893 2 года назад
Take my sub, you really deserve it. thanks alot mate. Hope that your channel blows up
@TheDeathMongrel
@TheDeathMongrel 3 года назад
The glasses look good. Happy New Year!
@hyfydistro
@hyfydistro 3 года назад
Flexbox has "gap" property now?!! 😍 Thank you!! I always find something new in your videos!
@wetsand7379
@wetsand7379 3 года назад
I'm addicted to learning CSS because of you!
@nitram_nosnibor
@nitram_nosnibor 3 года назад
That is very useful, thanks for sharing Kevin 👍🏻
@kieran2347
@kieran2347 3 года назад
Great video, Kevin. Thanks
@maxtreme2901
@maxtreme2901 2 года назад
thanks for the help, you make web-design learning much easier for me
@AnthonyDev
@AnthonyDev 2 года назад
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. :)
@cwsoft8428
@cwsoft8428 3 года назад
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 :-)
@tulsiraj1998
@tulsiraj1998 3 года назад
Awesome thanks Kevin for video on flexbox.
@MrDatingel
@MrDatingel 3 года назад
Glasses looking good though ;) as well as your tutorials are very much appreciated and helpful! Thanks a lot
@digigoliath
@digigoliath 3 года назад
Love this. Super Awesome!! TQVM!
@banderamusical
@banderamusical 2 года назад
Thanks Kevin , You really helped me out today
@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!!
@bizzistance
@bizzistance 2 года назад
Thanks so much! Very helpful!
@juanvia8394
@juanvia8394 2 года назад
Flexbox design patterns I surely will use in my projects. Thank you for that.
@louisgamor
@louisgamor 3 года назад
What will I do without your tutorials? !!😩😍
@muhammadzaakirmungrue3146
@muhammadzaakirmungrue3146 2 года назад
I have watched many I think your the best CSS teacher on RU-vid. 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.
@comradea8119
@comradea8119 2 года назад
Brilliant! As always actually. :) Thanks for the usefull knowledge.
@iamjustine1
@iamjustine1 2 года назад
Really the CSS king!! Thanks for the knowledge!
@edilebert
@edilebert 3 года назад
You are the nicest RU-vidr I've ever seen Mr. Powell! I love watching your content! So wholesome
@KevinPowell
@KevinPowell 3 года назад
Thanks so much 😊
@saurabhshukla2605
@saurabhshukla2605 3 года назад
Hi there love to watch a video on complete website with advance css and animations. And Happy New year in advance..
@haskomeyer4924
@haskomeyer4924 3 года назад
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.
@silverhakusho
@silverhakusho 8 месяцев назад
Thank you for your videos. They've been an invaluable resource in my web development learning journey
@zhyphirus548
@zhyphirus548 2 года назад
This is an old video, but I recommend using grid templates for doing navbars, sidebars. It's an inline CSS, and It can achieve the same results using min max and fr.
@KlausOppermann
@KlausOppermann Год назад
Very helpful, thank you!😄
@deadaccount6327
@deadaccount6327 2 года назад
i've never heard of the ch unit before thats reallly helpful
@captaceospades0987
@captaceospades0987 3 года назад
I Always enjoy your content.
@TheMetalMag
@TheMetalMag 2 года назад
Awesome , getting crazy with flex
@Ayomikun
@Ayomikun 3 года назад
Safari really starting to feel like the new IE for me 😤
@michalroesler
@michalroesler 8 месяцев назад
And an enormous thank you 4 teaching me modern CSS.
@kennethgan1333
@kennethgan1333 3 года назад
all hail to the Css King!Such a life saver!
@gad1023
@gad1023 3 года назад
Amazing as usually. Thnx
@axeldrax007
@axeldrax007 3 года назад
Thanks for the video !!
@sashatv138
@sashatv138 3 года назад
Thank you, Kevin!
@somnvm37
@somnvm37 3 года назад
The gridish was great. Always wanted tgat.
@TheSpaceman4991
@TheSpaceman4991 3 года назад
I love your content! Nice glasses too! ;)
Далее
The thing people get wrong about flex-basis
9:00
Просмотров 58 тыс.
Are you using the right CSS units?
6:30
Просмотров 438 тыс.
Самое хитрое животное.
00:57
Просмотров 647 тыс.
Kumpir (Loaded Potato)
00:22
Просмотров 1,5 млн
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 187 тыс.
Learn flexbox the easy way
34:04
Просмотров 672 тыс.
6 things I wish I knew about CSS when I started
9:09
Просмотров 223 тыс.
How to take control of Flexbox
16:01
Просмотров 90 тыс.
Flexbox Tutorial - Flexbox containers
17:31
Просмотров 191 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 40 тыс.
Flexbox or grid - How to decide?
18:51
Просмотров 694 тыс.