{"id":289115,"date":"2019-07-01T07:15:13","date_gmt":"2019-07-01T14:15:13","guid":{"rendered":"http:\/\/css-tricks.com\/?p=289115"},"modified":"2019-07-01T09:05:03","modified_gmt":"2019-07-01T16:05:03","slug":"making-width-and-flexible-items-play-nice-together","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/making-width-and-flexible-items-play-nice-together\/","title":{"rendered":"Making width and flexible items play nice together"},"content":{"rendered":"

The short answer:<\/strong> flex-shrink<\/code> and flex-basis<\/code> are probably what you\u2019re lookin\u2019 for.<\/p>\n

<\/p>\n

The long answer<\/h3>\n

Let\u2019s say you want to align an image and some text next to each other with like this: <\/p>\n

\"A<\/figure>\n

Now let’s say you reach for flexbox to make it happen. Setting the parent element to display: flex;<\/code> is a good first start.<\/p>\n

.container { \r\n  display: flex; \r\n}<\/code><\/pre>\n
And this results in…<\/p>\n
\n  See the Pen 
\n  Flex-Shrink Example 1<\/a> by Robin Rendle (@robinrendle<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Yikes! Well, that’s kinda okay, I guess. It makes sense that the image would bump right up against the text like that because we haven\u2019t set a width<\/code> on the image. Ideally, though, we\u2019d like that image to have a fixed width and then the text should take up whatever space is left over.<\/p>\n
Okay, so let\u2019s go do that!<\/p>\n
.container { \r\n  display: flex; \r\n}\r\n\r\nimg { \r\n  width: 50px;\r\n  margin-right: 20px; \r\n}<\/code><\/pre>\n
\n  See the Pen 
\n  Flex-Shrink Example 2<\/a> by Robin Rendle (@robinrendle<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
This looks great in Chrome. But wait, what? If we inspect the image tag in Firefox DevTools, we\u2019ll find that it\u2019s not the width value that we set at all: <\/p>\n
\"\"<\/figure>\n
We could use min-width<\/code> to force the image to the 50px width we want:<\/p>\n
img {\r\n  min-width: 50px;\r\n  margin-right: 20px;\r\n}<\/code><\/pre>\n
Buuuuuuut, that only sets helps with the width so we’ve got to put a margin in as well.<\/p>\n
img {\r\n  min-width: 50px;\r\n  margin-right: 20px;\r\n}<\/code><\/pre>\n
There we go. That’s better in Firefox and still works in Chrome.<\/p>\n
The even longer answer<\/h3>\n
I realized the image is getting the squished treatment because we need to use the flex-shrink<\/a> property to tell flex items not to decrease in size, regardless of whether or not they have a width.<\/p>\n
All flex-items have a flex-shrink<\/code> value of 1<\/code>. We need to set the image element to 0<\/code>:<\/p>\n
.container { \r\n  display: flex; \r\n}\r\n\r\nimg {\r\n  width: 50px;\r\n  margin-right: 20px;\r\n  flex-shrink: 0;\r\n}<\/code><\/pre>\n
\n  See the Pen 
\n  Flex-Shrink Example 3<\/a> by Robin Rendle (@robinrendle<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Getting better! But we can still do more to improve this.<\/p>\n
The director’s cut answer<\/h3>\n
We can tidy things up further because flex-shrink<\/code> is included in the flex<\/code> shorthand property.<\/p>\n
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]<\/code><\/pre>\n
If we set the flex-shrink<\/code> value to 0<\/code> and the flex-basis<\/code> value to the default width we want the image to be, then we can get rid of the width<\/code> property altogether.<\/p>\n
.container { \r\n  display: flex; \r\n}\r\n\r\nimg {\r\n  flex: 0 0 50px;\r\n  margin-right: 20px;\r\n}<\/code><\/pre>\n
Oh yeah:<\/p>\n
\n  See the Pen 
\n  Flex-Shrink Example 2<\/a> by Geoff Graham (@geoffgraham<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Another example<\/h3>\n
That flex-shrink<\/code> property solves a ton of other problems and is pretty dang important if you want to start using flexbox. Here\u2019s another example why: I stumbled upon yet another problem like the one above and I mentioned it in a recent edition of the newsletter<\/a>. I was building a navigation component that would let users scroll left and right through multiple items. I noticed the following problem when checking my work:<\/p>\n
\n  See the Pen 
\n  flex-shrink nav item 1<\/a> by Robin Rendle (@robinrendle<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
That longer navigation item shouldn\u2019t break into multiple lines like that — but I finally understood why this was happening, thanks to the previous issue. If you set the flex-shrink<\/code> property to 0<\/code> then it will tell each item in this navigation not to shrink and instead assume the width of the content instead, like this:<\/p>\n
\n  See the Pen 
\n  flex-shrink nav item<\/a> by Robin Rendle (@robinrendle<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
And, yes, we can go the extra step once again to use the flex<\/code> property instead, this time using auto<\/code> as the flex-basis<\/code> since we want the maximum amount of space for all items to be considered when divvying up space in the navigation container.<\/p>\n
\n  See the Pen 
\n  Setting flex for flexible nav elements<\/a> by Geoff Graham (@geoffgraham<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
Huzzah! We figured it out. Even though the answer is a single line of code, it’s is pretty essential one to making truly flexible elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
The short answer: flex-shrink and flex-basis are probably what you\u2019re lookin\u2019 for.<\/p>\n","protected":false},"author":223806,"featured_media":291903,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1676,1677,532],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/connected-boxes.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":341894,"url":"https:\/\/css-tricks.com\/equal-columns-with-flexbox-its-more-complicated-than-you-might-think\/","url_meta":{"origin":289115,"position":0},"title":"Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think","date":"June 10, 2021","format":false,"excerpt":"As awesome as flexbox is, what it\u2019s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325027,"url":"https:\/\/css-tricks.com\/understanding-flex-grow-flex-shrink-and-flex-basis\/","url_meta":{"origin":289115,"position":1},"title":"Understanding flex-grow, flex-shrink, and flex-basis","date":"November 10, 2020","format":false,"excerpt":"When you apply a CSS property to an element, there's lots of things going on under the hood. For example, let\u2019s say we have some HTML like this: 
 
Child<\/div> 
Child<\/div> 
Child<\/div> <\/div> And then we write some CSS... .parent { display: flex; } These are\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":161433,"url":"https:\/\/css-tricks.com\/boxes-fill-height-dont-squish\/","url_meta":{"origin":289115,"position":2},"title":"Boxes That Fill Height (Or More) (and Don’t Squish)","date":"January 30, 2014","format":false,"excerpt":"It's hard to sum up all the awesome that is flexbox in a little ol' blog post. Although we gave it a shot here. Here, let's just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236158,"url":"https:\/\/css-tricks.com\/flex-grow-is-weird\/","url_meta":{"origin":289115,"position":3},"title":"`flex-grow` is weird. Or is it?","date":"December 26, 2015","format":false,"excerpt":"The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis. When I found out about flex-grow, I made a simple demo to find out\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281193,"url":"https:\/\/css-tricks.com\/quick-whats-the-difference-between-flexbox-and-grid\/","url_meta":{"origin":289115,"position":4},"title":"Quick! What’s the Difference Between Flexbox and Grid?","date":"February 12, 2019","format":false,"excerpt":"Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302510,"url":"https:\/\/css-tricks.com\/four-layouts-for-the-price-of-one\/","url_meta":{"origin":289115,"position":5},"title":"Four Layouts for the Price of One","date":"January 29, 2020","format":false,"excerpt":"Pretty notable when a tweet about a flexbox layouts gets 8K+ likes on Twitter! 4 layouts for the price of 1, thanks flex \ud83d\udc4dcss` form { display: flex; flex-wrap: wrap; & > input { flex: 1 1 10ch; margin: .5rem; &[type=\"email\"] { flex: 3 1 30ch; } } }`view source\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/photo-grid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289115"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=289115"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289115\/revisions"}],"predecessor-version":[{"id":292254,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289115\/revisions\/292254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/291903"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=289115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=289115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=289115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}