Design Template by Anonymous

Flexbox shorthand & Property Ordering

There are many shorthand ways to write these multi line css changes within a single css property. The following example shows how flex-flow can be used to replace both flex-wrap and flex-direction.

Wrap & Direction Shorthand

This is the traditonal method to set both the flex-wrap and flex-direction properties properties

This is the shorthand way to include both direction and wrap within one property.

Grow & Shrink Shorthand

This is the traditonal method to set the grow, shrink, and flex-basis properties

This is the shorthand way to include grow, shrink, and basis all in one line.

When a unitless number is assigned to the 'flex' property it assumes the user desires to change the flex-grow property. So it then sets the shrink property to 1 and basis property to 0.