The flexible box called as flexbox is an powerful idea to give the container ability to alter their items
You can adjust child element to best fill with the available space of parent element apart of this you can manage the flex item (child elements) in direction changing, resizing, shrinking, stretching, etc.
Flexbox have lot of property that why it is a whole module not a single property. To use it's complex layouts can be achieved with less code.
Note: flex box currently a W3C Last Call Working Draft.
How to use :
As we know that flexbox is a module, so we have to set our style in two part first for flex container (parent element) and second for flex items (child element)
Flex container property
To use flexbox layout just set the display property on the parent element
Flex-direction :- It manages how the flex item will show in direct row, direct row is default row-reverse change in ltr direction, column will show the flex item in column and column-reverse change the column flex item direction.
Also, we can say that, this property specifies the direction of the flexible items, the flex-direction property will be noneffective id element is not flexible.
Justify-content :- flex-end align right all flex item, items are centered along the line using center and by space-between items are evenly distributed in the line; first item is on the start line, last item on the end line.
space-around distributed equal space from possible sides and default value is stretch