如何让flexbox列的高度相同？

Question

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> 

Answer 1

The equal height columns feature comes from align-items: stretch , which is an initial setting on a flex container. It makes flex items consume all available space in the cross axis .

If you check the actual size of each flex item, you will see that they are, in fact, equal height on each row ( demo ).

The problem is that the content of each item ( .icon-box-1 ) is not stretching full height. It's just height: auto (content height), by default.

In order for the content to stretch full height, add display: flex to each flex item, so align-items: stretch goes into effect, like on the parent ( demo ).

Then use flex: 1 to make the content fill the remaining space on the main axis ( demo ).

 .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; border: 1px dashed red; /* for illustration */ display: flex; /* new */ } .icon-box-1 { flex: 1; /* NEW */ 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> 

Answer 2

Try adding "display: flex" to .flexbox and "flex: 0 1 auto" to the icon box so it fills the heights out. Here ya go:

 .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; display: flex; flex-wrap: wrap; flex-direction: column; } .icon-box-1 { position: relative; margin-bottom: 50px; background: #fff; text-align: center; border: 1px solid #eee; padding: 10px; flex: 1 0 auto; } 

 <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>