A flexbox trick to improve text wrapping

Рет қаралды 148,354

Күн бұрын

Checkout iCodeThis 👉 icodethis.com/?ref=kevin
🔗 Links
✅ My finished version: icodethis.com/modes/design-to...
✅ 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
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
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!

Пікірлер: 232

@KevinPowell 24 күн бұрын

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!

@dashx2 24 күн бұрын

I usually use white-space: nowrap; in such scenarios. Is there any difference in this scenario between min-width: fit-content or white-space: nowrap?

@eioluseyi 24 күн бұрын

@@dashx2 I wish I could link replies here, but @jenstornell answered this in a reply on this video

@detore 24 күн бұрын

Would setting flex-basis:calc(50% - var(--gap)); fix the small screen being different widths problem without affecting anything else?

@ismailcreatvt 23 күн бұрын

Yes I did catch that mistake! But I guess we can let it slide as you showed us such amazing trick. 👌

@dashx2 23 күн бұрын

@@eioluseyi I read his comment. Usually these situtations happen for buttons and most of the time buttons dont have long text taking up more than 100px width so white-space-nowrap rarely is problematic on mobile.

@stairjoke 20 күн бұрын

I’ve been writing CSS for like 20 years and I feel like I know nothing.

@whyisthiscodenotworking 14 күн бұрын

Yeah correct 💯 💯💯 this guy knows everything in CSS

@1lllllllll1 7 күн бұрын

that's because you've been writing CSS since the dawn of time. I'm constantly aghast at the improvements of the cascade behavior and element addressing. Why people still use SCSS is becoming increasingly questionable. If you're a skilled front end dev, there really shouldn't need to be a need for any of the frameworks any longer. same for javascript and HTML.

@zayne-sarutobi 7 күн бұрын

@@1lllllllll1Ease of maintenance is why

@kadir572 6 күн бұрын

@@1lllllllll1well I challenge you to write a frontend framework from scratch then, let's see if it makes sense to use it or not

@MRJMXHD 6 күн бұрын

Bruv 😂

@KB04 24 күн бұрын

Had the same problem, literally never thought of using fit-content on min/max width.

@LePhenixGD 24 күн бұрын

Same

@peasantlord135 24 күн бұрын

Yeah, I just rolled with no text break haha

@artneo7 2 күн бұрын

The "min-width: fit-content;" declaration helped me out on a project, really cool tip when working with the flex layout! Thanks! 🙌🏼

@sourabhgupta3811 22 күн бұрын

You just saved developers so much time with your solution to this common issue!

@pascalmaranus 24 күн бұрын

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!

@Sagan1995 23 күн бұрын

Neat! You can also achieve the same results by adding "white-space: nowrap" to the buttons as well.

@KlethonioFerreira 22 күн бұрын

I think this might even kept the widths the same, I didn't test it

@Sagan1995 22 күн бұрын

@@KlethonioFerreira it unfortunately doesn't because the minimum width of one button is less than the other. Only giving the buttons a fixed minimum width will keep them equal in size.

@jaysonbautista95 16 күн бұрын

This is what I usually do when I encounter this issue, just text wrapping.

@Pixelarter 9 күн бұрын

@@Sagan1995 It's a bit overkill, but I think with a CSS grid instead of flexbox, it's possible to keep them the same size and make them properly wrap.

@Sagan1995 8 күн бұрын

@@Pixelarter I am imagining you can only achieve that in grid by providing a fixed minimum width, which can also be done in flexbox. So unless I'm wrong and there's another way to do it in grid, I am not seeing the advantage.

@larrybahr489 24 күн бұрын

I love that this solution does not need media queries! Great video as always

@Feedback406 23 күн бұрын

The best css channel on KZfaq and it’s not even close. Been watching for years Thank you!!!

@matizbrave 19 күн бұрын

That's the stuff! A simple, elegant solution to a common problem. Love it!

@JeremiahKellogg 24 күн бұрын

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!

@iamtharunraj 24 күн бұрын

I have had this issue for so long and never knew how to fix them. *Thank you so much, Kevin!*

@FlorinPop 24 күн бұрын

New lesson for today! Thanks Kevin! 🤩

@gasparsigma 24 күн бұрын

That's great. Very succinct without skipping the details

@marcuszeal 23 күн бұрын

This is clever. I like it! I feel like every video I watch of yours, Kevin, I learn about new CSS variables that I never knew existed or never thought to use the way you're using. Well done and thank you for sharing!

@jiwoo6788 24 күн бұрын

This came in big time! I'm currently working on something similar! Thanks Kevin!

@venomus9286 24 күн бұрын

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

@alexjagi3448 24 күн бұрын

Bloody hell that's a nice solution. I was literally working on the same problem last night. But this blows my solution out of the water. Gonna use this right away. Thanks.

@joshuamitchell6204 24 күн бұрын

I used this exact trick on this exact iCodeThis challenge! Love it!

@FlorinPop 24 күн бұрын

Glad to see you in the comments section also! 🤩

@fabbahiense 24 күн бұрын

It's a nice way to solve it. I've been using this trick for a while now, and it works on most cases!

@lewybagz 8 күн бұрын

Your timing is insane i was literally just struggling with this on a landing page yesterday. The Goat

@invictuz4803 16 күн бұрын

Love these videos, tackling the real issues!

@DevelTime 23 күн бұрын

I love this format, short gem, one subject, great for archiving for reminding yourself later. Btw. thank you VERY MUCH for being consistent I don't even remember for how long and presenting code and examples in clear way (i.e. big fonts, big pictures, etc) so your viewer don't have to buy new 40" monitor plus pair of new eyes. Thank you!

@RahulKumar-te3ob 24 күн бұрын

Brilliant! Loved the solution. Going to try this!

@sanketgawande3667 23 күн бұрын

I knew this one! Also make sure to add text ellipsis in case text is little longer than available width.

@JennyZibreva 22 күн бұрын

this is so beautiful, thank you Kevin!!!

@yarikar 10 күн бұрын

Amazing! Thank you so much for this tip!

@samahgad241 24 күн бұрын

thanks kevin i faced the same issue ,text wrap not satisfied me also . Awsome solution😍

@ichiroutakashima4503 24 күн бұрын

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!

@srsh12345 23 күн бұрын

Loved the breakdown. Thank you for the explanation.

@irfanMiral 23 күн бұрын

never thought about this could be a workaround. great solution!

@binoypatel09 24 күн бұрын

Simply awesome trick, you are the best

@exactzero 21 күн бұрын

The amount times I encountered this problem. Thanks!

@orange1890 21 күн бұрын

to fix the "downside" we could make it so that the texts take the same size by adding a fixed margin. really cool as always

@zenu5344 16 күн бұрын

Great sir! I had this issue some days ago and I just remove the space itself by adding -  and got it solved

@Avean 24 күн бұрын

Had no idea about min-width: fit-content. Love it!

@user-kw6sv7kf5l 23 күн бұрын

This is beyond cool. Thanks a lot!

@jasoncook2715 24 күн бұрын

Your saving my life there. Thank you

@Dipenparmar12 13 күн бұрын

Amazing out the box tutorial ❤❤

@teugene 24 күн бұрын

Thanks for the reminder! Keep forgetting this exists but we kept relying on flex-direction in media queries.

@EvestTech 20 күн бұрын

0:46 Thanks sooo much for explaining. I finally understand XD

@thedigitalceo 22 күн бұрын

Oooo fit-content. This is perfect. Run into this issue all the time ❤

@LetsGenocide 21 күн бұрын

Thank you very much! This one should be taught in all CSS classes >:o

@WilliamShrek 21 күн бұрын

Thanks. This is really cool!

@curefilms 24 күн бұрын

Thanks Kevin. Great Tip

@ZiafatAli 22 күн бұрын

Whooo 🎉 thank you for sharing ❤

@source_out 24 күн бұрын

Nice! Definitely better than a fixed min-width which is what I would normally do to solve this, but that can just get messy, this is cool 👍

@pnx1990 22 күн бұрын

I needed to do that for a two column layout, and keep content centered, I also found it worked using flex and min-with as fit-content

@GetPsyched6 24 күн бұрын

Great video! great tip as well!

@Imperial_Squid 24 күн бұрын

Oooooh very helpful! I was fiddling around with the youtube CSS the other day because I really hate how it squashes the channel name of there's a join button on the page, had no idea you can tell it like "wrapping text is a last resort, go through all the other rearrangement options first"

@fredhair 24 күн бұрын

I've done this before, it works well exactly for this sort of case! I think I ended up using it fairly recently in a flexy table where I wanted some columns such as email address column to basically take up more space if needed to prevent the text wrapping but otherwise should try and make the columns even width or at least take up space based on their content, I think I may have also used a min-width: max-content; at one point.

@reikooters 23 күн бұрын

Interesting to see the raw css stuff with flexbox. I started learning HTML 26 years ago, CSS probably been about 20 years and then I never kept up to date or used the newer features like flex and grid etc - by the time I started using those I had switched to tailwind, so I'm used to seeing this type of thing with just a few classes. I must admit if I had to use regular css for flex I wouldn't know what I'm doing. But that fit-content with the width is interesting and will keep it in mind for when it comes in handy one day.

@JacksonDiKey 23 күн бұрын

Awesome! Thanks for doing our life easier :)))

@mfrodyma1480 24 күн бұрын

Great!!! Good explanation.

@onio907 24 күн бұрын

this is great solution, thx for sharing

@Play_Streams 16 күн бұрын

That's genius! Thanks for this

@dvillegaspro 22 күн бұрын

Crazy I was literally dealing with this issue the same day you posted this video

@rfryanfavour4369 20 күн бұрын

i think you save a lot of us a lot but we just don't find your videos sooner 😂 😂

@hoaxygen 19 күн бұрын

In Tailwind it's "min-w-fit". Super handy!

@Cringe_Username 11 күн бұрын

woaow super useful, thank you

@eduardointech 6 күн бұрын

Thank you!

@k1mpman 23 күн бұрын

Beautiful!

@xreev0x 23 күн бұрын

this was super cool!

@CristianKirk 24 күн бұрын

Pretty cool! I've been using fit-content a lot lately for height specially.

@fexofenadinaGenerica 23 күн бұрын

I love these short videos

@OCEMTechZone 24 күн бұрын

Useful fix found thanks 🎉

@TheLollercaster 23 күн бұрын

great stuff!

@Javic167 24 күн бұрын

I didn't knew you could use fit-content in a width propperty, that's some real usefull thing

@R_Y_Z_E_N 6 күн бұрын

Wow i guess im good at css , i figured this out when i heard your problem 😅

@shahfaisal3923 8 күн бұрын

Thanks Kevin

@rodrigocorvalan4895 24 күн бұрын

Nice trick! I use white space but I will try this

@shreejipaliwal1215 24 күн бұрын

Very precious video

@QwDragon 24 күн бұрын

Very cool!

@stokbrood 24 күн бұрын

If you have 3 items next to each other, how can you make them all move under each other right when 1 of them hit that annoying break line

@yourlocalhuman3526 24 күн бұрын

media query that changes the organisation of the buttons only to flex-direction column at a certain container width? I assume it would need to be placed after the style that is enabling the linebreak(wrap)

@amilww 23 күн бұрын

Very handy!

@user-pv3rq5ib3y 24 күн бұрын

Wow I learned a new thing Kevin

@kebunkarta6257 15 күн бұрын

Thank you

@everythingnaruto5682 24 күн бұрын

I used to do whitespace: nowrap. How does it compare to the one you showed in the video Kevin?

@KevinPowell 24 күн бұрын

That works, except it has the potential to introduce overflow. I probably should have addressed it in the video, but I prefer this because it'll be basically the same, but if ever there is more text, or less space, the text will wrap instead of causing overflows.

@jenstornell 24 күн бұрын

It's problematic when it's tight, especially on mobile.

@ernestoj.suarezpons9352 24 күн бұрын

K, your videos are greater on time!

@clevermissfox 25 күн бұрын

I’m so excited for this. Had the exact same issue on this exact icodethis challenge !

@FlorinPop 24 күн бұрын

Miss!! 🫡

@clevermissfox 24 күн бұрын

@@FlorinPop Pop!!!! Our guy!

@kirstenellis1693 18 күн бұрын

fit-content.. what a lovely solution to min-width!

@modi_hemnt77 13 күн бұрын

Very helpful

@patricknelson 17 күн бұрын

Awesome tip! A very rare “ah hah!” moment from me. 😅

@thelaitas 19 күн бұрын

It's kinda funny how exciting did I find this haha

@AndyGaskin 24 күн бұрын

great tip

@AndreaCuchetto 24 күн бұрын

So smart!

@vilijanac 24 күн бұрын

Very good, it works, But media is suddenly an large monitor 8K, now need to increase the font too, lol

@mattsmith5856 24 күн бұрын

Nice!

@keessonnema 24 күн бұрын

What are the chances! I ran across this problem last week, this will solve it! Thanks

@osawereao 24 күн бұрын

So let me just say " I LOVE YOUR INTELIGENCE"

@jenstornell 24 күн бұрын

Really nice! I usually solve it with white-space: nowrap but that require a different solution on mobile.

@eioluseyi 24 күн бұрын

I'm curious about the different solution for mobile; what it is and why it's needed?

@jenstornell 24 күн бұрын

@@eioluseyi A mobile is not very wide. Nowrap prevent the text from wrapping even when it's tight. With accessible in mind it's recommended to be able to zoom 200%. So nowrap on mobile is a big risk and should probably always be avoided, on mobile.

@eioluseyi 24 күн бұрын

@@jenstornell hmm.. this is actually something I haven't really thought about. Thanks for sharing. Now, let me go and revisit all my codebases - CMD + SHIFT + F "no-wrap"

@jenstornell 24 күн бұрын

@@eioluseyi * "nowrap" 😉

@colindante5164 24 күн бұрын

thanks))

@user-ko1cw6mv4q 11 күн бұрын

Incredible 😛😛

@alexandrepereira6522 24 күн бұрын

I’d love you to cover text ellipsis with flex layouts. It’s always a pain. I can send you some complex cases

@devonchia5976 22 күн бұрын

Cool sharing! Not going to try out now but jus wondering if this works for both chrome and Firefox? Edge case fixes like this sometimes don't work on either one

@joyofdevotion 21 күн бұрын

This is great! I was scratching my head how to do it nicely. One issue I found when there are multiple button. The gap breaks it and keeps space on the right in the container. How do you deal with that?

@ScottSavageTechnoScavenger 24 күн бұрын

NICE!!!!!!!

@hosea_br 24 күн бұрын

3:10 to fix that problem, can't we set the min-width to be the width of the content of the larger button? (Hard coding the width in pixels) Great vid as always!

@YashG2309 24 күн бұрын

Also we can use min-width: max(fit-content,width_of_max_size_button) so the button size will remain always equal. What do you think?

@Omar45 24 күн бұрын

Hi Kevin! Wouldn't it be better to use grid here instead of flex? To achieve the equal-width columns with the buttons taking the whole cell? I think this way it's much easier that way, are there any caveats to this approach?

@shaunpatrick8345 24 күн бұрын

Using auto-fill/auto-fit I presume. You'd need to find the right width to move the 2nd button to a new row when the text starts to wrap, and if it's international or using a system font, that's not possible.