order Property

Use order: x to change the order of the items.

<div class='flexContainer'>
    <div style="<mark>order: 2</mark>">1</div>
    <div style="<mark>order: 3</mark>">2</div>
    <div style="<mark>order: 1</mark>">3</div>
</div>

flex Property

The flex: x y z is the shorthand property for flex-grow,flex-shrink, and flex-basis

<div class='flexContainer'>
    <div>1</div>
    <div style="<mark>flex: 0 0 200px;</mark>">2</div> /* Item will not grow, not shrink, and has an initial length of 200px */
    <div>3</div>
</div>

• flex-grow: 0: item will not grow
• flex-shrink: 0 item will not shrink
• flex-basis: 200px item has an initial length of 200px

flex-grow Property

Use flex-grow: x to specifies how much a flex item grow relative to the rest of the flex items.

• Default value is 0 (i.e. not grow beyond its given width)

<div class='flexContainer'>
    <div style="<mark>flex-grow: 1</mark>">1</div>
    <div style="<mark>flex-grow: 1</mark>">2</div>
    <div style="<mark>flex-grow: 8</mark>">3</div>
</div>

flex-shrink Property

Use flex-shrink: x to specifies how much a flex item shrink relative to the rest of the flex items.

• Default value is 1 (i.e. items will shrink if there's not enough space)

<div class='flexContainer'>
    <div style="<mark>flex-shrink: 1; </mark> width:500px">1</div>
    <div style="<mark>flex-shrink: 2; </mark> width:500px">2</div>
    <div style="<mark>flex-shrink: 5; </mark> width:500px">3</div>
</div>

flex-basis Property

Use flex-basis: length|% to specifies the initial length of the item.

<div class='flexContainer'>
    <div>1</div>
    <div style="<mark>flex-basis: 50%;</mark>">2</div>
    <div>3</div>
</div>

align-self Property

align-self: center|flex-start|flex-end|stretch|baseline;

• align-self overwrites the parent's/container's align-items property

<div class='flexContainer' style="<mark>align-items: stretch;</mark> height: 150px;">
    <div>1</div>
    <div style="<mark>align-self: center;</mark>">2</div>
    <div>3</div>
</div>

Reference

Examples from W3 School: www.w3schools.com/css/css3_flexbox_items.asp