Flex Shorthand

🏡 Home

Flex Grow and Flex Shrink are complicated and messy, so it's much better to use flex shorthand to acheive the same results. Arguably better results, as the outcome is much more predictable. If you wish to learn more about the flex shorthand, feel free to do further research.

Below, all elements are given the following flex:1 value.

flex:1;

Below, the first div is given flex:1, the second div is given flex:2, and the third div is given flex:3.

.div1 {
 flex:1;
}
.div2 {
 flex:2;
}
.div3 {
 flex:3;
}

💡

Forget about flex-basis, flex-grow, and flex-shrink as you will never use them in practice. Use the flex shorthand instead.

Constraining Flex

Use the min-width and max-width properties to constraint how much an element can grow or shrink when using the flex shorthand. Once it reaches that value, it will either stop growing or overflow into a scrollbox.

min-width: 75px;
min-width: 200px;