原文 : The Difference Between Width and Flex Basis, from gedd.ski

Photography |GoranH

I’ve been asked this question a lot, and in fact I googled it a lot when I was new to using Flexbox. Take a look at my Google search history and I’ve searched for questions like “flex-basis vs width vs min-width” four times in the last year. Cut the crap! Let me answer that question today, and I hope you don’t have to search anymore.

Flex project Formula

Here’s a formula to remember:

The content – > width – > flex – basis (restricted by Max | min – width)

When determining the size of a Flex project, it is important to remember that the final flex-basis size is limited by the min-width and max-width attributes.

Note: The Flexbox specification calls it the “imaginary spindle size”, but it is easier to understand this as the final size.

If flex-basis is not specified, flex-basis falls back to the width property. If the width attribute is not specified, flex-basis falls back to a computed width value (computed Width) based on flex project content.

To clear this formula, use a Flex container that is 1000px wide and contains some Flex projects:

container {
  display: flex;
  width: 1000px;
}
Copy the code

Set the width

We set the Flex project to 200px by 200px.

item {
  width: 200px;
  height: 200px;
}
Copy the code

Now that the Flex container is big enough to hold these items, let’s put them in.

In this example, we do not specify flex-basis for the Flex project (i.e., default flex-basis: auto), so the base size will revert back to width (200px).

In this case, setting width is the same as setting flex-basis.

Set the flex – basis

Let’s specify flex-basis for the Flex project again to see what happens.

item {
  width: 30px;
  flex-basis: 250px;
}
Copy the code

As you can see, with flex-basis specified, the width property is ignored and no longer in effect (i.e. not set).

item {
  flex-basis: 250px;
}
Copy the code

The final size of each project is 250px. Because there is still enough space in the container, the project will still be fine in the container.

Remember the Flex project formula:

The content – > width – > flex – basis (restricted by Max | min – width)

What we care about is the final size. The best practice is to use flex-basis instead of width or height. In particular, there is an old bug in Safari that the Felx-shrink attribute does not work on Flex projects that use the height attribute instead of the flex-basis attribute.

Flex-basis is limited by max-width

The final size of a Flex project is affected by the min-width and max-width attributes. Let’s set max-width on the Flex project:

item {
  flex-basis: 250px;
  max-width: 100px;
}
Copy the code

Although flex-basis sets it at 250px, it reaches the 100px max-width limit. So the final size is 100px, and the Flex project still fits nicely into the Flex container:

Now let’s set the min-width to see how it affects the final size:

item {
  flex-basis: 100px;
  min-width: 250px;
}
Copy the code

Although flex-basis is specified at 100px, it cannot be smaller than min-wdith at 250px. So the final size is 250px and the Flex project can fit right into the Flex container:

So, what exactly is Flex-basis?

We now know that in the case of flex-basis not specified, width is its fallback scheme, and min-width and max-width limit the upper and lower limits of the final size. So, what exactly is Flex-basis?

In the figure above, you may also have noticed that we visualized the size of the Flex project before putting it into the Flex container. The reason for doing this is to show that this is flex-basis: the size of a Flex project before it is put into the Flex container. This is the ideal or imaginary size for the Flex project. But the value specified for Flex-basis is not guaranteed to be the final size of the Flex project! Once we put the Flex project into the Flex container, things change. In the example above, the Size of the Flex container is just right, so the items are OK because the final size of all the items adds up to exactly the width of the Flex container (1000px). This is fine, but usually when the Felx-basis of all Flex projects is added up, Flex containers are either out of space or out of space, rather than just good enough like this.

When there’s not enough room

Suppose we put more flex-basis: 200px items in the container:

Before placing them in the container, each of these will take up 200px, making a total of 1600px. But our container is only 1000px wide. As a result, we don’t have enough room for so many Flex projects, and Flex projects shrink by default to fit the insufficient container size:

The starting width for all projects is 200px, so Flex projects shrink to fit the container space (to 125px each) because there is not enough space. Flex-shrink is used to control the shrinkage ratio. You can control the degree of shrink by specifying a larger or smaller value for flex-shrink, or even set it to 0 to forbid shrink.

When there’s room to spare

Sometimes, when we add up the final Flex-basis of all Flex projects, the container has space left.

item {
  flex-basis: 100px;
}
Copy the code

We can specify that our Flex project stretches to take up the remaining space after it is placed in the Flex container, controlled by the Flex-Grow property, which defaults to 0 to indicate that it will not stretch. In the following example, we set flex-Grow: 1 for each Flex project to take up the remaining space.

item {
  flex-basis: 100px;
  flex-grow: 1;
}
Copy the code

Growth and contraction are one of the highlights of Flexbox’s layout, and what makes Flexbox so good at responsive UI design.

width vs flex-basis

Now you can distinguish between width and flex-basis, min-width and max-width will limit the final size. When flex-direction is column or column-reverse, the relationship between flex-basis and height is defined.

(after)