Flexbox

Flexbox is used for creating element flexible which are under it. Various times we need to adjust elements in different type direction or justification here we can use Flexbox it gives easy flow and control on elements. here is an example -

without flex -

With display : flex;

ul {
            list-style-type: none;
            border: 2px solid red;
            display: flex;
    }

Attributes and Properties in container -

Flex-direction -

ul {
            list-style-type: none;
            border: 2px solid red;
            display: flex;
            flex-direction: row-reverse ;
        }

flex-direction: row/row-reverse/column/column-reverse ;

row - for direction in row , row-reverse - for row in reverse order, column - for direction in column, column-reverse - for column in reverse order,

flex-wrap -

ul {
            list-style-type: none;
            border: 2px solid red;
            display: flex;
            flex-wrap: wrap-reverse ;
        }

flex-wrap: nowrap/wrap/wrap-reverse ;

nowrap - 'default' all elements in one line, wrap - wraped elements when exceed elements in height or width, wrap-reverse - wrap elements but in reverse order .

flex-flow -

short-hand for flex-direction and flex-wrap -

syntax - flex-flow: _flex-direction_ _flex-wrap_ ;

ul {
            list-style-type: none;
            border: 2px solid red;
            display: flex;
            flex-flow: row wrap ;
        }

Justify-content -

ul {
            list-style-type: none;
            border: 2px solid red;
            display: flex;
            justify-content: right;
        }

justify-content: left/right/center/space-around/space-between/space-evenly;

left - for left align, right - for right align, center - for center align , space-around - it gives space around the elements, space-between - it creates space between elements, space-evenly - it devide space same between all elements.

align-items -

ul {
            list-style-type: none;
            border: 2px solid red;
            height: 300px ;
            display: flex;
            align-items: flex-start ;
        }

align-items: stretch/flex-start/flex-end/center/baseline ;

stretch - 'default' it automaticaly stretch elements along with width of container, flex-start - for align in start means upper side in start, flex-end - for align in end means lower side, center - align in center of container, baseline - align in thier baseline

Align-contents -

ul {
            list-style-type: none;
            border: 2px solid red;
            height: 300px ;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start ;
        }

align-content: flex-start/flex-end/center/space-around/space-between/stretch ;

flex-start - align verticaly in start, flex-end- align certicaly in end, center - align verticaly center, space-around - verticaly same space around elements, space-between - verticaly same space between elements, stretch - stretch elements to cover full size.

Attributes on child -

order -

By deault order is source order but we can change order by order

syntax - `order : value-in-integer ;

ul {
            list-style-type: none;
            border: 2px solid red;
            height: 300px ;
            display: flex;
            flex-direction: column ;
        }
#li-second {
            order : 3;
        }

flex-grow -

element automaticaly cover space by defined value in integer.

syntax - flex-grow : _value-in-integer_ ;

ul {
            list-style-type: none;
            border: 2px solid red;
            height: 300px ;
            display: flex;
            flex-direction: row ;
        }
#li-second {
            flex-grow: 4;
        }

self-align -

it align self in defined manner .

self-align : auto/center/flex-start/flex-end/stretch/baseline

ul {
            list-style-type: none;
            border: 2px solid red;
            height: 300px ;
            display: flex;
            flex-direction: row ;
        }
#li-second {
            align-self: center;
        }

flex-shrink -

for shrink space of element .