The flex shorthand property

 Use the flex Shorthand Property:

There is a shortcut available to set several flex properties at once.

 The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.

For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.

The default property settings are flex: 0 1 auto;.

Use the order Property to Rearrange Items:

The order property is used to tell CSS the order of how flex items appear in the flex container. 

By default, items will appear in the same order they come in the source HTML.

 The property takes numbers as values, and negative numbers can be used.

Use the align-self Property:

The final property for flex items is align-self. 

This property allows you to adjust each item's alignment individually, instead of setting them all at once.

 This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.

align-self accepts the same values as align-items and will override any value set by the align-items property.