Introduction :

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-container {
    display: flex;
}

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.

.flex-container {
    flex-direction: row;
}

.flex-container {
     flex-direction: row | row-reverse | column | column-reverse;
}

Flex-wrap: - Its make the flex item in a single row not the default value is no-wrap. wrap-reverse show all items in multi-line with right to left in ltr; left to right in rtl

.flex-container {
    flex-wrap: nowrap;
}

.container{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

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

.flex-container {
    justify-content: flex-start;
}

.flex-container {
      justify-content: flex-start | flex-end | center | space-between | space-around;
}

Align-items:- Its defult value is stretch. flex-end align from end point. center will start with center.

.flex-container {
     align-items: flex-start | flex-end | center | baseline | stretch;
}

Flexbox item properties

Click here to see flexbox item properties