Align Divs using CSS3 Flexbox

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

align div horizontal

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 div horizontal

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

align div vertical

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

align div vertical

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.


Post a comment

Name

Your Comment

Email (We dont publish it)

Comments

Nothing yet..be the first to share wisdom.