How Can I Make Flexbox Items Expand Proportionally Based on Their Original Sizes?

Making Flex-Grow Items Expand Based on Original Size

When styling elements with Flexbox, it's desirable to distribute the remaining space in the container among the items. However, by default, flex-grow assigns equal width to all items, regardless of their initial sizes. To retain this disparity, consider setting flex-grow to 'auto' instead of '1'.

Explanation

Flex-grow operates based on two parameters: available free space and flex-basis. Free space refers to the remaining space in the container that can be distributed among the flex items. Flex-basis determines the initial size of each item before distribution.

Absolute Sizing (flex: 1):

• When flex-basis is set to 0, flex-grow treats the entire available space as free space.
• This results in proportionally equal sizing for all items, regardless of their original content.

Relative Sizing (flex: auto):

• When flex-basis is auto (the default), flex-grow takes into account the content size of each item.
• Only the remaining space in the container is then distributed proportionally based on the flex-grow value.

Example:

Consider three buttons with varying widths. We want them to fill the remaining width of the container, each maintaining its proportional size.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

By setting flex-grow to auto, the buttons will expand from their current sizes proportionally, filling the available space while preserving their initial size differences.

The above is the detailed content of How Can I Make Flexbox Items Expand Proportionally Based on Their Original Sizes?. For more information, please follow other related articles on the PHP Chinese website!