The impact of the width property used with flex-grow?

user_937440 0
Viewed 110

Please see the code below:

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
  border: 1px solid;
  width: 1000px;
}
<header>
  <ul class="child">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
  </ul>
</header>

Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.

Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px). It appears to me that the behaviour is as follows:

  1. If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.
  2. If a width is added to the flex items meaning they cannot all fit on one row then honour the width.
  3. If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.

Have I understood this correctly and why does the width effect the flex items like this?

I have done my own research and found questions like this: What are the differences between flex-grow and width?. However, I have not found an answer to my question. I have also read about the flex grow property here: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-grow-property

flexbox css html
1 Answers

It's important to note that width, height and flex-basis in a flex container represent the initial size of the item.

Once that size are determined, then flex-grow and flex-shrink enter into the picture and do their work, if possible. That can change the initial size.

Now, let's break down your question into the main points:

Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.

OK

Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px).

Do you mean "e.g., 372.28 pixels (not 1px)", not "i.e.", because the size of the item will vary depending on the size of the viewport. In other words, the size of each item will scale as you resize the window. But this is not an essential point.

All boxes are indeed equal length. This happens because the width is set to 1px.

If you were to remove the width rule, then the boxes would vary in length based on their content length. This is because the default width / flex-basis is auto.

If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.

Not necessarily.

The width property doesn't always relate to items all fitting on one row. That behavior is controlled by the flex-wrap and flex-direction properties.

Also, the width property doesn't always relate to items all having equal length. Other factors, such as flex-grow, can have an impact.

If a width is added to the flex items meaning they cannot all fit on one row then honour the width.

Not necessarily.

flex-grow, flex-shrink and flex-wrap can all have an impact.

If you want the width / flex-basis of an item to remain fixed, set both flex-shrink and flex-grow to 0 (which disables those functions).

If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.

Not necessarily.

flex-grow, flex-shrink and flex-wrap can all have an impact.

More details:

user_35972760
Related