Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Align heights with Flexbox

Align heights with Flexbox

Problem

Im using http://demo.agektmr.com/flexbox/ as reference, with following config:

A
B
C
D
E
.box { display: flex; flex-flow: row nowrap ; justify-content: space-around; align-content: space-between; align-items: center; }

Then I set different Height for each box. They got vertically aligned in middle, but keeping their set heights.

How can I use flexbox so that boxes have flexible heights and all them fit to the biggest one?

A practical example is a basic website with 2 sidebars and a content column, and they have dynamic content and should all have same height.

Problem courtesy of: Hikari

Solution

According to this article, changing align-items: center; to align-items: stretch; will do the trick.

Solution courtesy of: Ilya Streltsyn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Align heights with Flexbox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×