The Flexbox layout provides efficient way to layout, align and distribute space among items in a container. This is really helpful when the size of the elements in the container is unknown and/or dynamic. Using the flex in a container, gives the ability to alter its items width/height and order as well to best fit in the space available. A flex container expands items to fill available free space, or shrinks them to prevent overflow. The flex is a value for the display property. It has to be provided in the container for the flex to work. Only if it is defined inside the container, flex properties will work. Flex properties are defined on the child elements. To make the container to be flex, add this property in the container: display: flex; or display: inline-flex; for the inline variation.
FLEX DIRECTION - It may take 4 values - row(default), column, row-reverse, column-reverse. e.g. flex-direction: column-reverse
FLEX ORDER - It is used to specify the order of specific flex items. By default it is zero. The flex items are sorted accoring to their order value. It can also be negative. e.g. order: 4
FLEX WRAP - It specifies whether the flex items should be wrapped or not. It take three values - nowrap(default), wrap, wrap-reverse. e.g. flex-wrap: wrap
FLEX GROW - It specifies the ratio with which a flex item grows relative to the other flex items, when there is some extra space available. If it is zero means it's width will not change. e.g. flex-grow: 2
FLEX SHRINK - It specifies the ratio with which a flex item shrinks relative to the other flex items, when there is smaller space then the container width. It is just opposite to flex-grow. If it is zero means it's width will not change. e.g. flex-shrink: 2
FLEX JUSTIFY CONTENT - It is used to align the flex items along the main axis. The main axis is the direction of flex-direction. It may take 6 values - flex-start(default), flex-end, center, space-between, space-around, space-evenly. e.g. justify-content: center
FLEX ALIGN ITEMS - It is used to align the flex items along cross axis. The cross axis is perpendicular to main axis. It may take 5 values - flex-start, flex-end, center, stretch(default), baseline. e.g. align-items: baseline
FLEX ALIGN CONTENT - It is used to align the flex lines, i.e. multiple lines of flex lines. It only works when there are multiple line of flex items. It may take 6 values - flex-start, flex-end, center, space-between, space-around, stretch(default). e.g. align-content: center
FLEX ALIGN SELF - It is used for the alignment of selected flex items inside the flex container. It overrides the default alignment set by the flex container. It may take 6 values - auto(default), flex-start, flex-end, center, stretch, baseline. e.g. align-self: center
FLEX BASIS - It is used to specify the initial length to the flex item. It will first apply the length of the item before applying flex-grow or flex-shrink to the items. e.g. flex-basis: 120px