Think of flex as a three-knob shortcut for a flex item: it sets how the item grows, how it shrinks, and its starting size. Instead of writing three separate properties, you can tune them together. section 12.6
Read the three parts from left to right:
- flex-grow controls the share of extra space an item receives. section 12.6
- flex-shrink controls how an item responds when the container does not have enough room. section 12.6
- flex-basis suggests the item's initial size before available space is distributed. section 12.6
A few useful shortcuts
flex: 0 1 auto; keeps the familiar default combination. flex: 1 0; gives an item a positive grow value and a zero shrink value. flex: 0 0 10em; keeps the item from growing or shrinking while suggesting 10em as its basis. Try changing one number at a time in a flex layout and watch which item gets the room. section 12.6
item {
flex: flex-grow flex-shrink flex-basis;
flex: flex-grow flex-shrink;
flex: flex-grow flex-basis;
flex: flex-grow;
flex: flex-basis;
}
Browse the shorthand's supported forms, from all three values to a single grow or basis value. section 12.6
