How can you flexibly change the sizes of elements using flex?

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

• flex-grow: Determines how much an element can grow relative to other elements in the flex container. Default value is 0 (does not grow).
• flex-shrink: Determines how much an element can shrink relative to other elements in the flex container. Default value is 1 (can shrink).
• flex-basis: Sets the initial size of the flex item before space is distributed using flex-grow and flex-shrink. Default value is auto (size depends on content or explicitly set size).

They can be used separately or in the shorthand flex: [<flex-grow>] [<flex-shrink>] [<flex-basis>].

Examples:

.container {
  display: flex;
}

.item1 {
  flex-grow: 1; /* The element will occupy available space proportionally to 1 */
}

.item2 {
  flex-shrink: 0; /* The element will not shrink */
  flex-basis: 100px; /* Initial size 100px */
}

.item3 {
  flex: 1 1 auto; /* grow=1, shrink=1, basis=auto */
}

.item4 {
  flex: 0 0 50px; /* grow=0, shrink=0, basis=50px - fixed size */
}

Table of main flex values:

flex value	flex-grow	flex-shrink	flex-basis	Description
auto	1	1	auto	Element can grow and shrink
none	0	0	auto	Element does not grow or shrink
0 <n> <size>	<n>	<n>	<size>	Specified values
<n>	<n>	1	0	Specified grow, shrink=1, basis=0