So far we have covered all the properties that work on a flex container. Now we will look into the Flex Item Properties.
Properties of Flex Item
Order
The order property controls the order in which the items appear in the flex container.
syntex
/* 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.
syntex
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.
syntex
div:nth-of-type(2) {
flex-shrink: 3;
}
Flex Basis
Flex basis specifies the initial main size of a flex-item.
syntex
div:nth-of-type(2) {
flex-basis: 100px;
}
Flex
Flex is shorthand for flex-grow
, flex-shrink
and flex-basis
.
syntex
#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.
syntex
#myBlueDiv {
align-self: center;
}