So far we have covered all the properties that work on a flex container. Now we will look into the Flex Item Properties.
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 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 defines the ability for a item to shrink if necessary.
div:nth-of-type(2) { flex-shrink: 3; }
Flex basis specifies the initial main size of a flex-item.
div:nth-of-type(2) { flex-basis: 100px; }
Flex is shorthand for flex-grow, flex-shrink and flex-basis.
flex-grow
flex-shrink
flex-basis
#main div { -ms-flex: 1; flex: 1; } /* IE 10 */ #main div { -ms-flex: 1; }
Wrap up flex item properties with the align-self property which allows alignment of individual items.
align-self
#myBlueDiv { align-self: center; }