CSS: flex (flex-grow, flex-shrink, flex-basis)

flex (shorthand)

flex is a shorthand for

• flex-grow
• flex-shrink
• flex-basis

• property flex is for a item in Flexbox.
• it specifies the item may grow or shrink in size, and a basis size.

syntax

flex: flex-grow flex-shrink flex-basis;

Can also be a single value, or two values. Meaning depends on the value type. It's confusing. Always use 3 values.

.item-2801 {
 flex: 2 1 300px;
/* grow, shrink, basis */
}

flex-grow • flex-shrink

flex-grow: number

• Specify how much the item size grows.
• It grows only when there is free space. That is, the flexbox size is greater than all the container sizes, in the main axis.
• A value of 0 means do not grow.
• Default value is 0.
• The meaning of a value is taken relative to all such values of all items. If the number is bigger than another item, means it grows more than the other item.

1

2

3

1

2

3

flex-shrink: number

• Specify how much the item size shrinks.
• It shrinks only when there is not enough space. That is, the flexbox size is less than all the container sizes, in the main axis.
• A value of 0 means do not shrink.
• Default value is 1.
• The meaning of a value is taken relative to all such values of all items. The bigger the number, the more shrink.

flex-basis

Initial “width” before growing/shrinking.

flex-basis: auto

default.

uses the item's content size or width (in row direction)

flex-basis: content

sizes based purely on content.

flex-basis: length

• CSS: Length Units