For quite some time we’ve used the faux columns technique to create the appearance of equal height columns. With flexbox, this is no longer necessary.
.columns-wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
}
However, once you add in the appropriate browser prefixes for both the current and previous versions of flexbox, this becomes much longer:
.columns-wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
-ms-flex-align: stretch;
}
Equal height columns using flexbox
With Sass and Bourbon this is made even easier as Bourbon provides mixins to add all the browser prefixes for both the current and previous versions of flexbox.
.columns-wrapper {
@include display(flex);
@include flex-direction(row);
@include align-items(stretch);
}
Sass with Bourbon mixins