Advertisement
CSS

Simple CSS Alignments with Flexbox

Post image

Vertical centering and vertical alignment in CSS has always given web developers a headache. What makes the problem worse is that where there should be a simple answer, there simply isn't. CSS rules such as vertical-align doesn't influence block elements and tends to be reserved only for images.

Other options include using line-height to vertically align text, and using position to vertically align block elements - even then you have to use a negative margin. The problem comes when you don't know how big the centered block element needs to be, especially with ever changing device sizes.

Enter flexbox.

Flexbox gives us a very simple sollution to aligning center, both horizontal center and vertical center. Flexbox gives us 3 rules to play around with - align-items, align-self, justify-content.

CSS Absolute Center

I'm some text in a centered block element.

I'm centered both horizontally and vertically

With very little code we've managed to align our block element horizontally and vertically in the center.

.container {
	align-items: center; 
	display: flex; 
	justify-content: center; 
}

CSS Align Bottom

Another common question is about aligning an element at the bottom of the container, or at the bottom of a page. Flexbox makes aligning bottom very easy in CSS.

CSS Align Bottom

I'm some text in a centered block element at the bottom of its container.

I'm centered horizontally and aligned at the bottom, regardless of the container height.

Again, very little code, nicely done.

.container {
	align-items: flex-end; 
	display: flex; 
	justify-content: center; 
}

CSS Align Left and Right

With our element aligned to the bottom we can specify both left and right alignment without the need for floating.

CSS Align Bottom Left

I'm some text in a left block element at the bottom of its container.

I'm left aligned and aligned at the bottom, regardless of the container height or width.

CSS Align Bottom Right

I'm some text in a right block element at the bottom of its container.

I'm right aligned and aligned at the bottom, regardless of the container height or width.

The code for this is yet again, very simple.

.container {
	align-items: flex-end; 
	display: flex; 
	justify-content: space-between; 
}

Flexbox 2 Split Columns - 100% Height

If we take our previous example, we can make it extend vertically 100% with some very simple code.

CSS Align Left

I'm some text in a left block element at the bottom of its container.

I'm left aligned and aligned at the bottom, regardless of the container height or width.

CSS Align Right

I'm some text in a right block element at the bottom of its container.

I'm right aligned and aligned at the bottom, regardless of the container height or width.

Now with flexbox it's much easier to create a simple 2, 3, 4 column layout, and the best thing is, you can reorder them using CSS.

.container {
	align-items: stretch; 
	display: flex; 
	justify-content: space-between; 
}

CSS Full Column, and Bottom Align

Now lets make one column full height, whilst the other is aligned to the bottom.

CSS Align Left

I'm some text in a left block element filling the left side of its container.

I'm left aligned and aligned at the top.

CSS Align Bottom Right

I'm some text in a right block element at the bottom of its container.

I'm right aligned and aligned at the bottom, regardless of the container height or width.

This example could be used on a full layout with a sidebar and chat box.

.container {
	display: flex; 
	justify-content: space-between; 
}

.left {
	align-self: stretch;
}

.right {
	align-self: flex-end;
}

Tiered CSS Layout

If we take our previous example, we can make it extend vertically 100% with some very simple code.

CSS Align Left

I'm some text in a left block element filling the left side of its container.

I'm left aligned and aligned at the top.

CSS Align Center

I'm some text in a center block element in the center of its container.

CSS Align Bottom Right

I'm some text in a right block element at the bottom of its container.

I'm right aligned and aligned at the bottom, regardless of the container height or width.

This example shows how easy it is to align each element exactly where you need it, whether it's left aligned, vertically center aligned, or bottom aligned.

.container {
	display: flex; 
	justify-content: space-between; 
}

.left {
	align-self: stretch;
}

.center {
	align-self: center;
}

.right {
	align-self: flex-end;
}

Conclusion

As you can see, flexbox gives web developers much greater control over aligning block elements. You can easily align elements top, bottom, center, left, right with very little CSS.

If you want to create backwards compatible flexbox designs, use the standard browser prefixes to enable it (-moz-, -webkit-, -ms-).

Advertisement
You may also like:
comments powered by Disqus