CSS Properties for Flexbox

Flexbox is a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

Note that float, clear and vertical-align have no effect on a flex item.

Properties for the Parent(Container properties)

To define a flex container use: display: flex or display: inline-flex
It enables a flex context for all its direct children.

• flex-direction: row | row-reverse | column | column-reverse
• flex-wrap: nowrap | wrap | wrap-reverse
• Shorthand for the flex-direction and flex-wrap properties is flex-flow: direction wrap
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
• align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
• align-items: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

Properties for the Children(Flex items)

• flex-grow: 0 (default)
• flex-shrink: 1 (default)
• flex-basis: auto (default)
• Shorthand for the flex-grow and flex-shrink and flex-basis properties is flex: grow shrink basis;
• align-self: stretch | flex-start | flex-end | center | baseline
• order: 0 (default)