Understanding flex-grow, flex-shrink, and flex-basis

Deeply understand the interaction of CSS flex-grow , flex-shrink and flex-basis properties. When we apply CSS attributes, a lot of things happen behind the scenes. For example, suppose we have the following HTML:

<div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Then we write some CSS:

 .parent {
  display: flex;
}

In fact, in addition to the above line of CSS code, we also implicitly apply a series of attributes to .child element, as if we wrote the following style ourselves:

 .child {
  flex: 0 1 auto; /* Default flex value*/
}

This is because some properties have default values ​​that are intended to be overridden by us. Without understanding the style of these implicit applications, the layout can become very confusing and difficult to manage.

flex attribute is a shorthand CSS attribute, which sets three independent CSS attributes at the same time. Therefore, the abbreviation above is equivalent to:

 .child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Abbreviation attributes bundle multiple CSS attributes together, making it convenient to write multiple attributes at once, just like background attributes.

While abbreviation properties may be confusing, for flexbox, it is recommended to use abbreviation because there is a complex interaction between flex attribute and its sub-properties.

The default style is very useful because in most cases we don't need to know the details of these flexbox properties. For example, when using flexbox, we usually write like this:

 .parent {
  display: flex;
  justify-content: space-between;
}

We don't even need to care about child elements or the styles applied to them. But this is just the tip of the iceberg of flexbox.

What if we wanted to dig deep into how flexbox, including flex-grow , flex-shrink and flex-basis properties work, and how to use them to create more complex layouts?

Let's start with the simplified overview and go back to the default flex attribute applied to the child elements:

 .child {
  flex: 0 1 auto;
}

These default styles tell the child elements how to stretch and shrink. I usually understand these abbreviation properties as:

 /* How do I think about the above rules in my mind*/

.child {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/* or... */

.child {
  flex: [maximum] [minimum] [ideal size];
}

The first value flex-grow defaults to 0, which means that the element does not expand (mostly). The element size depends on its content. For example:

 .parent {
  display: flex;
}

If we change the default value of flex-grow attribute from 0 to 1:

 .child {
  flex: 1 1 auto;
}

Then all elements will equally distribute the space of the .parent element, but only if their contents are the same length. This is equivalent to:

 .child {
  flex-grow: 1;
}

If we want one of the elements to grow more than the others, we can do this:

 .child-three {
  flex: 3 1 auto;
}

/* or... */

.child-three {
  flex-grow: 3;
}

flex-shrink is the second value in the abbreviation:

 .child {
  flex: 0 1 auto; /* flex-shrink = 1 */
}

flex-shrink tells the browser the minimum size of the element. The default value is 1, which means that the same space is always occupied. If set to 0:

 .child {
  flex: 0 0 auto;
}

The element will not shrink.

flex-basis is the last value added to flex abbreviation by default, which tells the element to maintain the ideal size. The default value is auto , which means "use my height or width".

When we set flex-basis to 1000px:

 .child-three {
  flex: 0 1 1000px;
}

We tell the browser to try to take up 1000px of space. If it is not possible, the element will take up space proportionally based on the other elements.

If we want to prevent the element from shrinking:

 .child-three {
  flex: 0 0 1000px;
}

Setting flex-wrap property will change the layout:

 .parent {
  display: flex;
  flex-wrap: wrap;
}

all in all:

• Try to use the abbreviation of flex .
• When using abbreviation, remember the maximum, minimum, and ideal size.
• Element content also affects how these values ​​work.

The above is the detailed content of Understanding flex-grow, flex-shrink, and flex-basis. For more information, please follow other related articles on the PHP Chinese website!