Flexbox – The CSS Vertical Alignment Issue Solution

Flexbox – The CSS Vertical Alignment Issue Solution

Flexbox is one of the most unused CSS modules. It can resolve your vertical alignment issues and a lot more.

CSS “hacks” have become the norm in creating complex front-end designs whilst trying to get the content to look right.

caniuse-768x188

 

Flexbox was first released in 2009 and it’s beginning to be widely supported by all modern browsers (source: caniuse.com). It was included in CSS3 to take care of the broken and missing item alignment, direction and order. One of the best and most common ways of utilising this is the ability to modify the width or height of a container’s children to optimise the usage of space on responsive websites.

What is Flexbox?

Flexbox is  a CSS3 module/layout giving CSS the ability to arrange elements and make styling with CSS easier.

This module was designed to take over from/enhance the CSS box model by giving you the ability to make containers and content “flex”ible. This module provides many new features including the rearrangement of objects in any direction (top, right, bottom and left). With this you can pick the order of the elements regardless of the markup. Alignment and size alterations is another  feature where you can resize elements to utilise unused space and align elements with a lot less code.

When to Use Flexbox?

I’ve used this module for small parts of a site, not the styling of a whole page. Its value lies in the ability to style containers or sections of a site like a header, footer, sidebar or grid system. I’ve created some examples below of what you can use it for.

Filling height:

.fill-atleast-full-height{
	/** content that elements will expand to **/
	display: flex;
	/** flex direction - row/column **/
	flex-direction: column;
}
.fill-atleast-full-height > div{
	/** expanding the element to fill the container **/
	flex:1;
}

Vertical alignment:

.vertically-center-content{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: top/center/bottom;
	justify-content: center;
}

Grid system:

HTML:
<div class="grid">
	<div class="grid__row grid__row--sm">
		<div class="grid__item">
			<div class="grid">
				<div class="grid__row grid__row--lg">
					<div class="grid__item">1</div>
					<div class="grid__item">2</div>
				</div>
			</div>
		</div>
		<div class="grid__item">3</div>
	</div>
	<div class="grid__row grid__row--md">
		<div class="grid__item">4</div>
		<div class="grid__item">5</div>
	</div>
</div>
CSS:
.grid {
	border: solid 1px #e7e7e7;
}

.grid__row {
	display: flex;
	flex-direction: column;
}

.grid__item {
	flex: 1;
	padding: 12px;
	border: solid 1px #e7e7e7;
}

@media all and ( min-width: 480px ) {

	.grid__row--sm {
		flex-direction: row;
	}

}

@media all and ( min-width: 720px ) {

	.grid__row--md {
		flex-direction: row;
	}

}

@media all and ( min-width: 960px ) {

	.grid__row--lg {
		flex-direction: row;
	}

}
Demo

Resources

This article was written to spread the awareness of this very powerful and underused CSS tool/module.

Andrew Collins