Flexbox or Flexible Box Layout i.e. :-
https://www.w3.org/TR/css-flexbox/
is layout module in css3 implemented to improve the items align,direction,order and dynamic size.The purpose of this is to utilize the space of container with maximum possible ways,which makes it usable for different screen sizes.Also known issue of handling vertically align ‘Div’ is quite easy and simple with this approach.
With just few properties you will be able to get any kind of layout with CSS3.
We will require to just style parent container and child container with below mentioned properties:-
1)For Flex Container:-
a)display: flex | flex-wrap
For defining type of container.
b)flex-direction = row(default) | row-reverse | column | column-reverse;
Used for setting direction of items inside a flex container.
c)align-items: flex-start | flex-end | center | baseline |stretch (default)
Horizontally/Vertically aligns the flex items when there is additional space inside container other than the item’s dimension.It will work horizontally or vertically is decided on the ‘row’ or ‘column’ value of ‘flex-direction’.
d)justify-content: flex-start | flex-end | center | baseline |stretch (default)
Horizontally/Vertically aligns the flex items when there is additional space inside container other than the item’s dimension.It will work horizontally or vertically is decided on the ‘row’ or ‘column’ value of ‘flex-direction’.And this will be work on the other dimension, which is controlled by ‘align-items’.
2)For Item container:-
align-self : flex-start | flex-end | center | baseline |stretch (default)
‘align-self’ will override the ‘align-items’ of the parent container.
Attaching a sample code of html page below.In this we have align 3 divs inside a div horizontally and vertically center.
If you will open the commented code of Item’s style then you will see how the ‘align-self’ of item will overide the ‘align-items’ of parent container.
<!DOCTYPE html> <html> <head> <style> .fcontainer { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 1000px; height: 800px; background-color: #eeeeee; } .fitem1 { /*align-self:center;*/ text-align: center; background-color: #cccccc; width: 200px; height: 200px; margin: 10px; border-width: 5px; border-color: #000000; padding: 10px; } .fitem2 { /*align-self:flex-end;*/ text-align: center; background-color: #cccccc; width: 200px; height: 200px; margin: 10px; border-width: 5px; border-color: #000000; padding: 10px; } .fitem3 { /*align-self:flex-start;*/ text-align: center; background-color: #cccccc; width: 200px; height: 200px; margin: 10px; border-width: 5px; border-color: #000000; padding: 10px; } </style> </head> <body> <div class="fcontainer"> <div class="fitem1">Div 1</div> <div class="fitem2">Div 2</div> <div class="fitem3">Div 3</div> </div> </body> </html>
This will also work fine if you will providing the dimensions in percentage.
Hope this will hope full for someone.