flex-grow controls how items expand to fill available space. flex-shrink controls how they compress. flex-basis sets the starting size before growing or shrinking. flex: 1 is the most common shorthand value.
Advanced Flexbox
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* multi-line alignment */
}
.item {
flex-grow: 1; /* how much to grow */
flex-shrink: 0; /* don't shrink */
flex-basis: 200px; /* starting size */
order: -1; /* change order visually */
align-self: flex-end; /* override alignment */
}