flex-grow、flex-shrink和flex-basis共同構成Flex容器中項目的彈性行為。 1. flex-grow決定項目在有額外空間時的相對擴展比例，值越大擴展越多；2. flex-shrink決定空間不足時項目的相對收縮比例，值越大收縮越多；3. flex-basis設定項目在未分配空間前的初始大小，可為固定值或基於內容。三者結合通過flex屬性簡寫使用，實現(xiàn)對佈局的精準控制。

If you've ever tried to control how items stretch or shrink inside a flex container, you've probably come across flex-grow , flex-shrink , and flex-basis . These three properties together make up the flex shorthand and determine how flex items behave when there's extra space or not enough space in the container.

Here's what each one actually does and how they work together.

What flex-grow really means

This property decides how much a flex item will grow relative to others when there's extra space . If all items have flex-grow: 0 , none of them will grow, no matter how much space is available.

Let's say you have two divs inside a flex container:

 .item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}

That means when there's extra space, item2 will take up twice as much of that space as item1. Think of it like splitting a pizza — if item1 gets one slice and item2 gets two slices, that's the same idea.

A common use case is making all items expand equally:

 .item {
  flex-grow: 1;
}

This makes every item take up equal space inside the container.

How flex-shrink affects layout

Now imagine the opposite situation: your flex container is too small for all the items. That's where flex-shrink comes in. It controls how much an item will shrink compared to others when space is tight.

By default, all flex items have flex-shrink: 1 . So if you don't change anything, all items will shrink evenly.

But if you set:

 .item1 {
  flex-shrink: 3;
}
.item2 {
  flex-shrink: 1;
}

Then item1 will shrink three times more than item2. This can be useful if you want some elements to stay larger even when things get cramped.

One thing to note: setting flex-shrink: 0 stops the item from shrinking at all (which is handy for fixed-size buttons or icons).

The role of flex-basis

Before any growing or shrinking happens, the browser looks at flex-basis . You can think of this as the starting size of the item before space distribution kicks in.

It can take values like auto , 0 , or specific widths like 200px .

• flex-basis: auto → uses the element's width or content to determine the starting size.
• flex-basis: 0 → starts with zero width, so all space is distributed based on flex-grow .

Setting flex-basis: 0 along with flex-grow: 1 is a popular trick to make all items share space equally , regardless of their original content or width.

Example:

 .item {
  flex: 1 1 0;
}

This forces all items to start at zero width and then grow equally into the available space.

Putting it all together with the flex shorthand

Instead of writing all three properties separately, most people use the shorthand:

 flex: [flex-grow] [flex-shrink] [flex-basis];

So this:

 flex: 1 0 200px;

Means:

• Grow as needed ( 1 )
• Don't shrink ( 0 )
• Start at 200px ( flex-basis )

Common patterns:

• flex: 1 1 auto → let items grow and shrink from their natural size
• flex: 0 0 auto → disable both growing and shrinking
• flex: 1 1 0 → force equal sizing by ignoring initial width

Understanding these three values gives you precise control over how your flex items respond to different container sizes. It might seem confusing at first, but once you see how flex-grow , flex-shrink , and flex-basis interact, building flexible layouts becomes way easier.

基本上就這些。

以上是'Flex-Grow'，``flex-shrink''和`flex-basis''如何工作？的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！