I am trying to wrap my head around flexbox and I have hit a wall with something very simple that I can't seem to get right.
I have 6 columns that I want all the same height with 3 on each row. I have set the flex items to have a width of 33% but I have not set a height on anything. I thought once the flex items had content it would take the one with the greatest height and match everything to it.
Here is my markup:
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
}
.icon-box-1 {
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
}<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>