The CSS3 flexbox provides an easy method for aligning html elements such as divs, vertically or horizontally within a container. The flexbox specification has changed a lot over the recent years, but the newest spec is supported by most leading browsers( IE 10+, Chrome, Opera 12.1, Firefox 20+, iOS Mobile Safari 7, Opera Mobile and Blackberry). If you want to extend browser-support, just combine the old and new syntaxes in your code.
To make the parent element a flex container, use display: flex; Now each child element becomes a flex item.
Every flexbox has two axes - main axis and cross axis. To set the main axis vetical, use flex-direction: column;
To set the main axis horizontal you dont need to do anything because this is default. After any over-ride if you need to revert back to horizontal, use flex-direction: row;
Use justify-content to define how items are laid along main axis. Use align-items to define how items are laid along cross axis.
For the following examples maindiv is the container that has 3 child divs.
Align divs horizontally using flex
Declare the container as a flexbox using display: flex;. The child divs will be by default laid out along the horizontal axis. To have them spaced out evenly, use justify-content: space-between; or justify-content: space-around;
CSS
#main-div {
width : 200px;
height : 100px;
border : 2px solid black;
margin : 0 auto;
padding : 5px;
display : flex;
justify-content : space-between;}
.child-div {
background-color : #99CCCC;
height : 40px;
width : 40px;
text-align : center;
border : 1px solid black; }
HTML
<div id="main-div"> <div class="child-div"> </div> <div class="child-div"> </div> <div class="child-div"> </div> </div>
Result
To center the divs just use align-items: center; inside the parent div.
CSS
#main-div {
width : 200px;
height : 100px;
border : 2px solid black;
margin : 0 auto;
padding : 5px;
display : flex;
justify-content : space-between;
align-items: center;}
Result
Align divs vertically using flex
In this case, you have to set main axis as the vertical axis using flex-direction: column; and also use justify-content:space-between; or justify-content:space-around; to evenly space child elements.
CSS
#main-div {
width : 200px;
height : 100px;
border : 2px solid black;
margin : 0 auto;
padding : 5px;
display : flex;
flex-direction: column;
justify-content:space-between;}
Result
To center the divs just use align-items: center; inside the parent div.
CSS
#main-div {
width : 200px;
height : 100px;
border : 2px solid black;
margin : 0 auto;
padding : 5px;
display : flex;
flex-direction: column;
justify-content:space-between;
align-items: center;}
Result
To make your code compatible with older browsers, just combine old and new syntaxes, older ones first and newer ones later. This will make sure that newer styles over-ride older styles. Instead of display: flex;
display: -webkit-box; /* For old iOS 6, Safari 3.1-6 */ display: -moz-box; /* For old Firefox 19 */ display: -ms-flexbox; /* For - IE 10 */ display: -webkit-flex; /* For - Chrome */ display: flex; /* For IE 11, Spec - Opera 12.1, Firefox 20+ */
Flexboxes allow the child elements to be aligned in any direction and they can also adapt to the space. This means you can code complex layouts using few simple lines of code. Fkex boxes are sure to be the future of designing layouts.
