For understanding the examples in the article consider the following code-
<body>
<div class="container">
<div class="item">one</div>
<div id="flex" class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
</div>
flex box gives us flexible and easy options to arrange elements inside our webpage.
how to use-just select the parent(for ex-div container) and write display: flex;
PARENT PROPERTIES-
1.FLEX DIRECTION-to determine the axis along which children(items inside container) will align themselves. NOTE-by default the main axis in the flex is horizontal and cross axis is vertical.
#ROW REVERSE-to reverse the order and shift items to the end. E.g.-
.container{
display: flex;
border: 2px solid green;
height: 800px;
flex-direction: row-reverse;
#COLUMN-to change the direction of contents as vertical.
#COLUMN REVERSE-to reverse the order of contents and shift the children to the end.
2.JUSTIFY CONTENT-this is a property for space management and for aligning the children in the webpage. default property is flex start(i.e. all the children at the start ).it works horizontally if the flex direction is set at row and vertically if it is set at column.
#FLEX END-to shift children in the end. E.g.-
justify-content: flex-end;
#SPACE BETWEEN-the items at the extreme will shift to the repective ends(left and right end) and all the space available will be distributed in between the elements.
#SPACE EVENLY-All the space will be distributed equally among children.
SPACE AROUND-It is a prperty which gives equal space around the elements.
3.ALIGN ITEMS -This property is also for aligning the items and space management .it works vertically if the flex direction is set at row and horizontally if it is set at column.
Like justify content we have align items properties like flex-start,flex-end,centre,stretch.
#STRETCH-To stretch the elemnts upto the border of the parent.
E.g.
align-items: stretch;
4.FLEX WRAP-Used for responsive page.When we shrink/squeez the webpage then instead of children getting shrink,they will wrap themselves in rows to avoid shrinking.E.g.-
flex-wrap: wrap;
5.GAP-used to define gap between children.E.g.-
gap: 300px;
CHILDREN PROPERTIES-
1.FLEX GROW-by using this property we determine that the specified children should take the remaining available space OR what space a children should take relative to other children.E.g.-
#flex{
flex-grow:;
}
2.ALIGN-SELF-used to align items along vertical axis(if main axis is set to row)
align-self: center;