#Equal Height Columns in a Row using Flex Box
In this tutorial I'll be showcasing how we can achieve equal heights on our columns using the CSS and HTML. More specifically I'll be demonstrating the Flex Box feature of CSS which allows us to create these equal height columns without resorting to a nasty javascript workaround.
Flex CSS
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
background-color: #eee;
display: flex;
color: white;
}
.list-content {
padding: 1.5em;
}
So how does this work? In our .list class we use display: flex; which initiates flexbox for the outer element. In order for our inner-elements to all have the same height, we have to use display:flex; once again in our .list-item css class.
Continue Learning
The Difference Between Class Selectors and ID Selectors in CSS
In this tutorial we take a look at the exact differences between class selectors and id selectors in CSS
How To Work With CSS3 Variables
In this tutorial we look at how we can get started working with CSS3 variables
CSS3 Border Radius Tutorial
In this tutorial we look at how we implement curved borders on some of the elements within our html
CSS3 Box Shadow Tutorial
In this tutorial we look at how we can implement a css3 box shadow to components of our website.