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

flex (shorthand)

flex is a shorthand for

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

• They are all for a item in Flexbox.
• They specifies items may grow or shrink in size, and basic size.

syntax

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

Default value: flex: 0 1 auto; (don't grow, can shrink, basis = content size)

.x-item {
 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

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 lesser 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.

default value is auto.

flex-basis: auto

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

flex-basis: content

sizes based purely on content (newer, good support)

flex-basis: length

• CSS: Length Units