Тёмный

You can do that with margins? 

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

My flexbox playlist: • Flexbox basics
CSS margins are used all the time, but people don't realize how creative you can get with some clever uses of margin: auto. Used in the right places, you can do all sorts of cool things and make more complicated layouts with simple HTML.
#css
--
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!

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

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 302   
@ev721
@ev721 3 года назад
Thought I knew CSS. Then I discovered this channel. Now I never know how to feel after watching these videos. Happy to have learned something, close to tears when I realize how little I know.
@Dubstepschule
@Dubstepschule 3 года назад
Haha, same here!
@danielesibra2169
@danielesibra2169 2 года назад
The same too 😂
@rickyrayrosenberg420
@rickyrayrosenberg420 2 года назад
It's like some guy is a better boyfriend to my girlfriend than I am. Kevin is the mac.
@maggpie286
@maggpie286 2 года назад
How absolutely fabulous 🤩
@oskrm
@oskrm 3 года назад
"My flex grow is making it grow" - 2020 Kevin Powell
@tcritt
@tcritt 3 года назад
weird flex, but ok.
@safintheship
@safintheship 3 года назад
when Kevin Powell uploads a CSS video you f***ing click it.
@djeudy
@djeudy 3 года назад
Facts!!
@muhammadamir4964
@muhammadamir4964 3 года назад
Indeed
@benzflynn
@benzflynn 3 года назад
204k subscribers can't all be wrong. I hope you boys are making KP _feel the love_ on Patreon . . .
@keshav6097
@keshav6097 3 года назад
@@djeudy re the point every see esa Re Re ek ek baat
@louisik1
@louisik1 2 месяца назад
This is still one of the greatest bang for buck methods for arranging elements, especially for older pages/designs that don't have full fledged flex/grid/container implementations. Thanks again Kevin
@victorwestmann
@victorwestmann 3 года назад
You should definitely release more courses on how to use CSS in general. You are a really good teacher.
@soulhazetv
@soulhazetv 7 месяцев назад
Honestly his approach to teaching is by far the best I have come across here on YT. This is game changer..
@fraidoonhu9284
@fraidoonhu9284 3 года назад
So simple, yet profound, a master piece of CSS code. Poetry written in CSS.
@j.almadhaji
@j.almadhaji 3 года назад
Best Teacher on RU-vid 🙏🏻
@aram5642
@aram5642 3 года назад
When I started with css 100 years ago, I always wondered why you can center horizontally using margin auto, but not vertically. I love this vertical margin auto that has been made useful at last. This trick is so nifty when you want to align top/bottom some common elements within cards (such as link "Read more")
@RodrigoDAgostino
@RodrigoDAgostino 3 года назад
I learnt a while ago how to use margin: auto with flex-box to move one or several items to the opposite side, but I didn't know you could also use it to center one or some of them too. Thank you very much, Kev! :)
@dimensionalpotential
@dimensionalpotential 3 года назад
I appreciate that you add the errata , and also that you did it well (timing, and placement)!
@TerranceShaw
@TerranceShaw 3 года назад
Continue to love your stuff, Kevin! This definitely helped far more eloquently solve a problem I've had to hack together in the past. Keep up the awesome!
@jkevinparker
@jkevinparker Год назад
Kevin, I’m so glad I found your channel! My CSS knowledge was pretty extensive… in 2010. I’ve been out of the game for a while, so I’m learning to unlearn the hacks I’d learned to overcome Internet Exploder and other limitations. CSS seems to finally be mature, though I’m happy with how much of my old learning still applies!
@GaryBarclay
@GaryBarclay 3 года назад
Awesome, you always reveal something over stuff I think I know already. Keep up the great content.
@PHEELL822
@PHEELL822 3 года назад
What are the freaking odds that I come across this video on my feed while running into this exact problem with centering specific flex items while also pushing a few to the right? Kev you're the best!
@olivernygren2967
@olivernygren2967 3 года назад
Your channel is so helpful and you make everything so easy to understand. Much appreciated and please keep the content coming!! Sincerely, Front end developer student in his first week :)
@brootaylor
@brootaylor 3 года назад
Brilliant stuff Kevin. You've got a gift for explaining things simply and succinctly. Keep up the fab work and much appreciated.
@haldanegreen423
@haldanegreen423 Год назад
Def learnt more than a couple things, thanks as always Kevin, the way you explain the markup is awesome
@ibelong2u
@ibelong2u 3 года назад
This is brilliant! I'm fantasizing about all the fun I can have with this and media queries. Thank you for sharing.
@ThePhidge
@ThePhidge 2 года назад
Hey Kevin!! Sorry I'm so late to the party, but just wanted to let you know how much your videos are helping me out. I'm very new to the whole html/css/js thing, so tend to learn something new from any video I watch, but I find your way of explaining things and the level of detail you include seems to increase my understanding so much more. Thank you!
@piromaniaco3579
@piromaniaco3579 3 года назад
You did it again!! Your channel is the top of top. Thanks Kev!
@kalokanev
@kalokanev Год назад
I have recently found your tutorial. You are doing a great job! Keep up the good work, Kevin!
@hirumamwf3633
@hirumamwf3633 3 года назад
The value of knowledge in your whole videos is very expensive. And you gave us for free. Thank you very much.
@noclistify
@noclistify 3 года назад
I love this one, thanks for the content Kevin.
@yashkanekar6977
@yashkanekar6977 3 года назад
hello Kevin , I honestly just want to thank you enough ;u are doing such a wonderful job. I have been through your responsive layout course, it has made me better. I hope you never stop!!!! Thank you so very much!
@dennyyap8184
@dennyyap8184 Год назад
Appreciated for sharing Kevin👍🙏 it is really useful.
@CarlosChavez-gs1ld
@CarlosChavez-gs1ld 10 месяцев назад
Hi Kevin, I have watched many of your videos and they are always well done. I write websites in the raw code (not templates) and have done a good handful of sites. This particular video directly addresses serious headaches I run into with respect actually achieving the spacing I am looking for in my navigations or other list-options areas. I won't bore you with the details of what I have done to make it work (it is WAY too embarrassing). It is the combination of the margin usage you discuss WITH THE "nth-of-type()" selecting you are doing that enables a big reduction in BOTH the amount of CSS and the amount of HTML/Structure required. Thanks again.
@avananana
@avananana 3 года назад
To be fair, this all makes perfect sense when you give it some thought, but I would have never thought about this before seeing this video. I swear to god the knowledge this channel provides regarding CSS is pretty much unrivaled as far as I know, it's great.
@rosemaryvalad-on4888
@rosemaryvalad-on4888 2 года назад
How to be you sir?
@infosandfacts7536
@infosandfacts7536 3 года назад
Great stuff as positioning options are always very welcome.
@konsciousness
@konsciousness 3 года назад
I kinda knew how auto in CSS workes, but now I'm confident. Thanks again, Sir. If you think you have seen enough of CSS. You gotta binge watch Kevin's whole channel.
@degagnemarc
@degagnemarc 3 года назад
Merveilleux! Just the solution I for a problem I had! Thanks
@melzz
@melzz 3 года назад
Woah, my jaw literally open wide while watching this, i never knew those flex trick would make vertical margin auto work. Nice video
@Will-cn7vg
@Will-cn7vg 3 года назад
Thanks Kevin! Extremely helpful as always
@jameslesperance1
@jameslesperance1 2 года назад
You have really helped me. Thank you!
@codesader5720
@codesader5720 3 года назад
Awesome content as always. Got better clarity.
@TheCocoaDaddy
@TheCocoaDaddy 3 года назад
Awesome video! Very useful!!! Thanks for posting!
@daver3270
@daver3270 2 года назад
You're a great instructor Kevin. Thank you
@GlaucoGodoi
@GlaucoGodoi 3 года назад
Super useful !Thank you Kevin !
@kimokimo-se3ur
@kimokimo-se3ur 3 года назад
thank you , great teacher !! love from Tunisia .
@emkisn
@emkisn 3 года назад
I didn't learn anything from this video, but WHAT A GREAT VIDEO! I need to say that you are killing it at the content quality. I follow you channel for at least 2 years from now, and i need to give some feedback. The quality of the videos, the editing, the timing, its much more robust, you are really doing an amazing job, congratulations a lot. This tips and simple exemples help a lot, keep doing. Sometimes the subject of the video is not a new topic for me, but i always try to watch, just for the channel support, best regards. (sorry my noobie english)
@muhammadamir4964
@muhammadamir4964 3 года назад
Thanks Kevin for sharing your knowledge. It is very painful to learn on your own such effects but you make these things very simple and easy. Thanks
@Bleedmetal9
@Bleedmetal9 3 года назад
Been learning so much from you, you're amazing!
@amrani_art
@amrani_art 3 года назад
Didn't know flex-grow also works vertically. I was using height:100vh instead. Thanks for the tip!
@fabianpetersen2452
@fabianpetersen2452 Год назад
Hi Kevin, really loved this video. I always get stuck wih CSS and this helped me alot to understand how this all works. 👍
@Mark.Ritchie
@Mark.Ritchie 2 года назад
Every time I hear someone say 'em' when they talk, I now always feel they're trying to make a space in the sentence. That and recognising fonts in everyday life are things I'll probably never forget. Thanks css!!
@heitorlessa2715
@heitorlessa2715 3 года назад
This became my favourite channel to learn CSS - Practical, great didactic, and to the point
@user-lq5fs9eb8v
@user-lq5fs9eb8v 3 года назад
Thank you man, good tricks for beginners to simplify markup just using margin property
@hafpixels4172
@hafpixels4172 3 года назад
I'm really thankful for this. What I needed
@onestepwebdev
@onestepwebdev 3 года назад
Thanks Kevin, that's very awesome of you to do this quick Tut. Using Flex-box on a sidebar is a stroke of genius, what else should I have expected. How about drop-down menus inside the menu. Obviously, sub-lists would be one way.
@benzflynn
@benzflynn 3 года назад
Great vid. Very handy feature. Thanks, KP.
@YokoYoko_
@YokoYoko_ 2 года назад
I am currently learning the basics of CSS and this video gave me more motivation to go forth. So many crazy stuff that can be done with CSS!
@yashwanthsrini
@yashwanthsrini 5 месяцев назад
Awesome stuff. Thanks a lot! ❤
@k3tna
@k3tna 3 года назад
Incredible. Thanks Kevin.
@Akimb321
@Akimb321 3 года назад
Thank you for these videos, they're really great
@mishol
@mishol 11 месяцев назад
Very helpful, thanks so much!
@mounir101
@mounir101 3 года назад
Pretty awesome! Thank you.
@dineshrout2527
@dineshrout2527 3 года назад
Always useful content. Thanks man.
@HARIKRISHNANSRSRSHD
@HARIKRISHNANSRSRSHD 3 года назад
Kevin, your tutorials are awesome..!
@vasylbats2544
@vasylbats2544 3 года назад
Yes, I use such margins all the time in the flex boxes in my practice. Thanks, Kevin!
@aebek1413
@aebek1413 2 года назад
your videos are well structured and good , keep up the great work you are great teacher.
@HaraldEngels
@HaraldEngels 3 года назад
Brilliant! Thank you. After doing CSS since 20 years I learned something new today :-)
@lowercaseguy3578
@lowercaseguy3578 3 года назад
you're awesome! i always stuck with floats , now its very easy.
@kirankandula2779
@kirankandula2779 3 года назад
Thanks for the video. As always Kevin's teachings are THE best..!!
@kaveengoonawardane9651
@kaveengoonawardane9651 5 месяцев назад
Excellent video! Thanks
@mitetoOoOoO
@mitetoOoOoO 2 года назад
I love how happy he gets when saying "That's awesome". It's like watching Simon from Cracking the Cryptic finding his solution.
@saalimkhan4133
@saalimkhan4133 3 года назад
The guy teaches CSS fundamental concepts with practical use cases that makes me to watch only CSS videos on entire the RU-vid. Even though I hate CSS yet I love to watch his videos. Thanks man!
@oliver139
@oliver139 2 года назад
Your tutorials are really awesome
@PokemonGo-re7ue
@PokemonGo-re7ue Год назад
Amazing content, thank you!
@conalbirtles3720
@conalbirtles3720 3 года назад
Great work! From a practical application point of view, the only suggestion I would make would be to add margin-left: auto to li:nth-last-child(2) instead of li:nth-of-type(6) because it's much more likely that a client will want to add another item to the middle 'site menu' than to the right hand 'login menu'. The way it's set up now, if you were to add, let say 'Shop' to that middle menu, the layout would break. (You'd also need to change nth-of-type(7) to nth-last-child(1) but that probably goes without saying)
@rodrigoa.558
@rodrigoa.558 3 года назад
omg i ´m learning so much with u. thank you very much!!!
@nurantarlan
@nurantarlan 3 года назад
Super super cool content Kevin, thanks a lot ❤💻
@qna9686
@qna9686 3 года назад
Man i just discovered your channel. Great videos!
@joyvideos1802
@joyvideos1802 3 года назад
Cool options with margin, Thanks Kevin❤
@arunh3
@arunh3 3 года назад
I don't think I have subscribed to channel after watching just 2 videos, but this content is just really good and very well explained, so I subscribed. I am more of a backend person and gets tripped up with css sometimes so these videos are great for me.
@minhluudinh5522
@minhluudinh5522 2 года назад
You are amazing. Thank you for making great contents.
@afsanazamannipa7711
@afsanazamannipa7711 3 года назад
WOW, that's really cool. There are more things to use margin auto in CSS. Thanks a lot for the video.
@nargesbayat277
@nargesbayat277 2 года назад
your video was very helpful.thank you so much.
@beinyourguard
@beinyourguard 3 года назад
You are a great teacher, Kevin!
@caffeinated-pixels
@caffeinated-pixels 3 года назад
Ah, super useful, particularly for the vertical positioning!
@thrasosthrasos7353
@thrasosthrasos7353 3 года назад
In such cases it is more flexible to use a few dummy elements (does not render anything) and to insert them on those places where space should be taken (for example class="takeSpace") with style "flex-grow: 1;". This approach will work as expected when new link is inserted in the middle. Also it is possible to redistribute space in more flexible way by using different flex-grow values.
@abdelmonemnaceur7776
@abdelmonemnaceur7776 3 года назад
You deserve much more subscribers and thumbs up, Keep it up!
@PolishPolackski
@PolishPolackski 11 месяцев назад
Kind of first day at work and I did shine like a hero. A day, or two ago I watched THIS very video. Flex -> margin-top:auto did magic in Woo's tile.
@funyfunty
@funyfunty Год назад
Simply great. thanks
@mrinmoyghosh1749
@mrinmoyghosh1749 3 года назад
Best CSS designer you're..... You're always helping me a lot.
@djlee0721
@djlee0721 3 года назад
Kev you easily deserve 1 million + subscribers. Thanks again for this great video!
@cretik5296
@cretik5296 2 года назад
I used to do divs and was overwhelming. Thanks powell
@ari_archer
@ari_archer 3 года назад
what's the differance between and ?
@thiagosoares4744
@thiagosoares4744 2 года назад
Amazing content on this video!
@philippwakonigg280
@philippwakonigg280 3 года назад
Mind-blowing hahaha nice job!
@AJ-1404
@AJ-1404 Год назад
Thank you Kevin
@monsieurm2904
@monsieurm2904 3 года назад
Magicien of CSS !
@alexftw356
@alexftw356 Год назад
well i needed that. thank you
@joeldcanfield_spinhead
@joeldcanfield_spinhead 3 года назад
This is so very excellent. Using.
@malamhari_
@malamhari_ 3 года назад
I see why sometimes my margin didn't work properly, display:flex is the cause! Thanks
@MrEvansjethro
@MrEvansjethro 2 года назад
That's powerful, Powell. Perhaps I should say a Powellful CSS margin usage indeed.
@rishabhsharma_4769
@rishabhsharma_4769 2 года назад
Very nice explanation
@knightfallgame
@knightfallgame 3 года назад
Kevin do you have any vids about common alignment and element sizing issues that beginners face? Such as not doing a global reset and using percents for margins and other such things? Thank you for all of you videos, you are one of the main contributors to my growth as developer and designer. I appreciate you very much
@akshaychidre9139
@akshaychidre9139 3 года назад
Thanks, Kevin
@nunamediadesigns7490
@nunamediadesigns7490 3 года назад
Great content 😁 Subscribed ✅
@khaledsanny4817
@khaledsanny4817 2 года назад
Already knew this but ... hey ! keep up the good work Kevin ✌
@arminlinzbauer
@arminlinzbauer Год назад
Wow, thanks for reminding me that you could actually center with margin:auto. I pretty much only use flexbox these days for centering. The good old times :D
Далее
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 188 тыс.
Learn flexbox the easy way
34:04
Просмотров 675 тыс.
Разница подходов
00:59
Просмотров 63 тыс.
Margin and Padding Deep Dive: The basics
13:04
Просмотров 71 тыс.
Flexbox or grid - How to decide?
18:51
Просмотров 696 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 50 тыс.
How to take control of Flexbox
16:01
Просмотров 97 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 891 тыс.
A better image reset for your CSS
11:16
Просмотров 105 тыс.
23 CSS features you should know (and be using) by now
31:31
Are You Making These CSS Height Mistakes?
8:54
Просмотров 119 тыс.