3

Here's my simple codepen. All items across the row will have the same height due to align-items: stretch, which is the default. However I'd like to also make the heights the same across different rows. In this codepen, if you make your screen small enough so that blocks "five" and "six" are on their own second row, the height of items in the second row are smaller. How can I make all the items the same height as the largest block requires?

HTML:

<div class="flexParent">
    <div class="flexItem">one <br> two</div>
    <div class="flexItem">three</div>
    <div class="flexItem">four</div>
    <div class="flexItem">five</div>
    <div class="flexItem">six</div>
</div>

CSS:

.flexParent {
  display: flex;
  flex-wrap: wrap;
}

.flexItem {
    padding: 10px;
    margin: 10px;
    width: 500px;
    background-color: yellow;
}
PDN
  • 771
  • 2
  • 13
  • 29
  • @Michael_B Good find. Yes my question is an exact duplicate. I could not find that through the search. Looks like I'll have to do this programmatically, thanks! – PDN Apr 04 '16 at 15:00

0 Answers0