flex-grow, flex-shrink, flex-basis, and flex Properties

Growing and shrinking zombies

flex-grow: This lets you set a growth factor that allows items to grow to fill the space (either horizontally or vertically, depending on flex-direction). The growth factor is a positive, rational number and is not a direct multiplier for the width/height. Rather, when the flex algorithm looks at the remaining space available in a row or column, it calculates how to apportion space based on the flex-grow factors. A higher value means that that item is likely to get more space than those with a lower value. The default is 0, which means the item won’t grow at all. Negative numbers are invalid.

.zombie-item {
    flex-grow: 1.5;
}

flex-shrink: This lets you set a shrink factor for when flex items are too wide or tall for their containers (depending on the flex-direction that was set). Like the flex-grow factor, a higher value means that the item is more likely to shrink. The flex algorithm will see if it needs to slim some items to fit the available space and will take more space from elements with a higher flex-shrink. The default is 0, which means no space will be taken from the item. Negative numbers are invalid.

.zombie-item {
    flex-shrink: 3.5;
}

flex-basis: This sets the basic size value (width or height, depending on flex-direction) of a flexed item and helps determine when, how, and if a flexed item grows or shrinks. This can be set with any dimensional unit (i.e., pixels, ems, percentage. etc.), but flex-basis also has the following keyword options: content and auto. There are a few more, but they aren’t widely supported yet. It defaults to auto.

content allows the flex-basis to be determined by the item’s content. Due to a back and forth in the spec, the content keyword isn’t supported everywhere yet. However, we can produce the same results with flex-basis: auto plus a width or height (depending on flex-direction).

.zombie-item {
    flex-basis: 100px;
}

.zombie-item2 {
    flex-basis: content;
    flex-basis: auto 100px;
}

flex: This is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. It can be used with one, two, or three values.

• One value: One value means a unitless number will be assumed to be flex-grow, and a valid width value will be assumed to be flex-basis. If flex-shrink isn’t specified, it is assumed to be 1.

.zombie-item {
    flex: 2;
}

• Two values: Two values can be two unitless numbers. The first is flex-grow, and the second is flex-shrink. It could also be a unitless number and a width/height for a flex-grow and flex-basis.

.zombie-item {
    flex: 2 100px;
}

• Three values: Three values mean the first is flex-grow, the second is flex-shrink, and the last is flex-basis.

.zombie-item {
    flex: 1.5 2 100px;
}

You can also use some keywords: initial, auto, and none.

• The initial is equivalent to flex: 0 1 auto.
• auto is equivalent to flex: 1 1 auto.
• none equates to flex: 0 0 auto.

Note: The nth-child selectors are there to throw in a little bit of chaos, allowing some items to shrink, some to grow and some to have a different basis. If we applied grow/shrink to all items they would all have equivalent grow/shrink ratios and nothing would be different.

Experiments to try:

1. Add different grow, shrink, and basis to different items using ids zomb1 through zomb20. Watch how the layout changes.
2. Now take any one of your grow/shrink/basis combinations and rewrite it using the flex shortcut.