A flexbox trick to improve text wrapping
196,380
Published 2024-05-09
π Links
β My finished version: icodethis.com/modes/design-to-code/52/submissions/β¦
β ICodeThis: icodethis.com/?ref=kevin
β I have a 4-hour long course that deep dives flexbox: flexboxsimplified.com/
Disclaimer: Some of the links above might be affiliate links, which means that I'll receive a commission in case you like and decide to purchase the product or service. This comes at no extra cost for you, and helps support my channel π
β Timestamps
00:00 - Introduction
00:45 - Why flex-grow or flex: 1 don't work
01:30 - flex-wrap doesn't solve the issue either
02:00 - min-width to the rescue
04:05 - more about icodethis
#css
--
Come hang out with other dev's in my Discord Community
π¬ discord.gg/nTYCvrK
Keep up to date with everything I'm up to
β www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
πΊ www.twitch.tv/kevinpowellcss
---
Help support my channel
π¨βπ Get a course: www.kevinpowell.co/courses
π Buy a shirt: teespring.com/stores/making-t...
π Support me on Patreon: www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/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
All Comments (21)
-
Quick note: I mispoke when I said flex: 1; will make it a flex-shrink: 0. It makes it flex-grow: 1; flex-shrink: 1; and flex-basis: 0; You'd almost never notice the difference as long as the flex-basis is 0, but still, I did make a mistake there, sorry about that!
-
Iβve been writing CSS for like 20 years and I feel like I know nothing.
-
Had the same problem, literally never thought of using fit-content on min/max width.
-
This is brilliant! Coincidentally, I had to make a small change to an older website today. And I noticed they have a similar issue with two buttons, because the client's changed the text on the buttons. It's bothered me for years at this point. I'm applying this there right away!
-
Neat! You can also achieve the same results by adding "white-space: nowrap" to the buttons as well.
-
Iβm just grateful when the text isnβt truncβ¦
-
The "min-width: fit-content;" declaration helped me out on a project, really cool tip when working with the flex layout! Thanks! ππΌ
-
You just saved developers so much time with your solution to this common issue!
-
thanks - after 40 years dev avoiding CSS, loving finally embracing it, you have added some cool stuff to my toolbox. thanks again.
-
The best css channel on YouTube and itβs not even close. Been watching for years Thank you!!!
-
I love that this solution does not need media queries! Great video as always
-
That's the stuff! A simple, elegant solution to a common problem. Love it!
-
I fixed this with white-space: preline; but wasnt a fan how it ended in the end. This solution seems much better. Preline would just force the text not to break, but also had to add prettier ignore so it doesnt break the line. Takes a bit more setup. Thanks a lot Kevin for this solution, much appreciated :D
-
Someone mentioned you in different video and I'm so happy I discovered your channel. Useful stuff.
-
I have had this issue for so long and never knew how to fix them. Thank you so much, Kevin!
-
I honestly love short contents like these. I had this same issue and your solution was straightforward! I don't have time to watch a 30 minute or 12 hour video and then try to find which chapter and minute is the content I'm looking for. Thanks!
-
I used this exact trick on this exact iCodeThis challenge! Love it!
-
New lesson for today! Thanks Kevin! π€©
-
Nice! How glad am I this popped up as a recommended video right now. This solved a similar problem I was having and couldn't quite solve properly. This did exactly what I wanted. Thanks!
-
Your timing is insane i was literally just struggling with this on a landing page yesterday. The Goat
