Properties of Flex Item

So far we have covered all the properties that work on a flex container. Now we will look into the Flex Item Properties.

Order

The order property controls the order in which the items appear in the flex container.

/* Standard syntax */
div#red {order: 2;}
div#blue {order: 4;}
div#green {order: 3;}
div#yellow {order: 1;}

/* Safari 6.1+ */
div#red {-webkit-order: 2;}
div#blue {-webkit-order: 4;}
div#green {-webkit-order: 3;}
div#yellow {-webkit-order: 1;}

Flex Grow

Flex grow defines the ability for a item to grow if necessary.

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

Flex Shrink

Flex shrink defines the ability for a item to shrink if necessary.

div:nth-of-type(2) {
  flex-shrink: 3;
}

Flex Basis

Flex basis specifies the initial main size of a flex-item.

div:nth-of-type(2) {
  flex-basis: 100px;
}

Flex

Flex is shorthand for flex-grow, flex-shrink and flex-basis.

#main div {
  -ms-flex: 1;
  flex: 1;
}

/* IE 10 */
#main div {
  -ms-flex: 1;
}

Align Self

Wrap up flex item properties with the align-self property which allows alignment of individual items.

#myBlueDiv {
  align-self: center;
}

.
.