Making width and flexible items play nice together

Short answer: flex-shrink and flex-basis properties are most likely the solutions you are looking for.

Detailed answers

Suppose you want the image and text to be arranged side by side like this:

Now, let's say you use Flexbox to achieve this. Setting the parent element to display: flex; is a good start.

 <code>.container { display: flex; }</code>

turn out……

Oops! OK, I think this is acceptable. It makes sense that the image is close to the text, because we do not set the width of the image. Ideally, we want the image to have a fixed width, and the text then takes up the remaining space.

OK, let's do it!

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

This looks great in Chrome. But wait, what? If we check the image tag in Firefox DevTools, we will find that it is not the width value we set at all:

We can use min-width to force the image to reach the 50px width we want:

 <code>img { min-width: 50px; margin-right: 20px; }</code>

However, this will only help set the width, so we have to add a margin as well.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

That's it. Better in Firefox, and still works in Chrome.

More detailed answers

I realized that the image is compressed because we need to use flex-shrink property to tell Flex items not to reduce size, regardless of whether they have width or not.

flex-shrink value of all Flex projects is 1. We need to set the image element to 0:

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

Better and better! But we can still make more improvements.

Final answer

We can organize it further because flex-shrink is included in flex abbreviation property.

 <code>flex: none | [ ? || ]</code>

If we set the flex-shrink value to 0 and set flex-basis value to the default width we want the image to have, then we can get rid of width attribute completely.

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

Oh, yeah:

Another example

flex-shrink property solves a lot of other problems, and it is very important if you want to start using Flexbox. Here is another example of why: I stumbled upon another question similar to the above, which I mentioned in my recent newsletter. I'm building a navigation component that allows the user to scroll multiple projects left and right. While checking my work, I noticed the following issues:

Longer navigation items shouldn't be wrapping like that - but I finally got why this happens, thanks to previous questions. If you set flex-shrink property to 0, it will tell each item in this navigation not to shrink, but to take the width of the content, as follows:

Yes, we can take the extra step again to use the flex attribute, this time using auto as flex-basis because we want to consider as much space as possible for all items when allocating space in the navigation container.

Long live! We solved it. Although the answer is just a line of code, it is crucial to creating truly flexible elements.

The above is the detailed content of Making width and flexible items play nice together. For more information, please follow other related articles on the PHP Chinese website!