如何使用FlexBox均匀分隔列？

Question

We have a set of results that should be displayed in three columns. Using Flexbox we were able to get a majority of what we wanted to accomplished (ie All have the same height, properly aligned at the top (see flex__top , and properly aligned at the bottom (see flex__bottom ).

However, we have ran into an issue where when one of the flex__bottom elements has a height different then the others, the alignment is off.

How do we align all columns to have the same height while having the flex__bottom section start in the same positions?

Goal :

1. Ensure all columns have the same height
2. For every item inside the flex__bottom should have a border-top that aligns with all others.

Issue

Desired Output

Codepen is available here in case it gets difficult to replicate in the inline code snippet

• codepen

 /* Columns */ @media screen and (min-width: 320px) { .col-m-12 { width: 100%; padding: 16px; display: flex; justify-content: center; align-items: stretch; } } @media screen and (min-width: 768px) { .col-t-4 { width: calc(33% - 48px); } } /* Flex */ .flex__wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; flex-direction: row; flex: 0 1 auto; } .flex__link { display: flex; align-items: stretch; justify-content: space-between; flex-direction: column; background-color: #eee; } .flex__top { padding: 16px; } .flex__bottom { border-top: 1px solid; } /* Image */ img { height: auto; display: block; width: 100%; } /* Lists */ ul { list-style: none; } ul>li { display: inline-flex; border: 1px solid; margin: 4px; padding: 4px; } /* Link */ a { text-decoration: none; color: #000; } 

 <div class="flex__wrapper"> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/arch" class="flex__img"> <h2 class="flex__h2">Check back tomorrow;</h2> <p>I will see if the book has arrived.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/nature" class="flex__img"> <h2 class="flex__h2">I am happy</h2> <p>I am never at home on Sundays.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>Progressively matrix</li> <li>Uniquely build extensible</li> <li>seamless customer</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/people" class="flex__img"> <h2 class="flex__h2">Malls are great places to shop</h2> <p>I can find everything I need under one roof.</p> </div> <div class="flex__bottom"> <ul> <li>maximizing</li> <li>Monotonectally whiteboard</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/tech" class="flex__img"> <h2 class="flex__h2">I want to buy</h2> <p>but know it won't suit me.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>task error-free</li> <li>Energistically</li> <li>practices</li> <li>ethical methodologies</li> <li>task error-free</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/animals" class="flex__img"> <h2 class="flex__h2">Last Friday in three week</h2> <p>Blue worm shake hands with a legless lizard.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>incubate</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/animals/grayscale" class="flex__img"> <h2 class="flex__h2">She advised</h2> <p>him to come back at once.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>Seamlessly</li> <li>build excellent</li> </ul> </div> </a> </div> </div> 

Answer 1

If you can limit the amount of content in item heading and descriptions you could add a min-height to .flex-top .

 /* Columns */ @media screen and (min-width: 320px) { .col-m-12 { width: 100%; padding: 16px; display: flex; justify-content: center; align-items: stretch; } } @media screen and (min-width: 768px) { .col-t-4 { width: calc(33% - 48px); } } /* Flex */ .flex__wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; flex-direction: row; flex: 0 1 auto; } .flex__link { display: flex; flex-direction: column; background-color: #eee; } .flex__top { padding: 0 16px; min-height: 350px; } .flex__bottom { border-top: 1px solid; } /* Image */ img { height: auto; display: block; width: 100%; } /* Lists */ ul { list-style: none; } ul>li { display: inline-flex; border: 1px solid; margin: 4px; padding: 4px; } /* Link */ a { text-decoration: none; color: #000; } 

 <div class="flex__wrapper"> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/arch" class="flex__img"> <h2 class="flex__h2">Check back tomorrow;</h2> <p>I will see if the book has arrived.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/nature" class="flex__img"> <h2 class="flex__h2">I am happy</h2> <p>I am never at home on Sundays.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>Progressively matrix</li> <li>Uniquely build extensible</li> <li>seamless customer</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/people" class="flex__img"> <h2 class="flex__h2">Malls are great places to shop</h2> <p>I can find everything I need under one roof.</p> </div> <div class="flex__bottom"> <ul> <li>maximizing</li> <li>Monotonectally whiteboard</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/tech" class="flex__img"> <h2 class="flex__h2">I want to buy</h2> <p>but know it won't suit me.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>task error-free</li> <li>Energistically</li> <li>practices</li> <li>ethical methodologies</li> <li>task error-free</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/animals" class="flex__img"> <h2 class="flex__h2">Last Friday in three week</h2> <p>Blue worm shake hands with a legless lizard.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>incubate</li> </ul> </div> </a> </div> <div class="col-m-12 col-t-4"> <a class="flex__link" href="#"> <div class="flex__top"> <img src="https://placeimg.com/640/480/animals/grayscale" class="flex__img"> <h2 class="flex__h2">She advised</h2> <p>him to come back at once.</p> </div> <div class="flex__bottom"> <ul> <li>Learn More</li> <li>Seamlessly</li> <li>build excellent</li> </ul> </div> </a> </div> </div> 

However, maybe grid is a better option for this layout

 @media screen and (min-width: 640px) { .grid__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } } .grid__item { background: #ccc; padding: 10px; margin-bottom: 10px; } @media screen and (min-width: 640px) { .grid__item { margin-bottom: 0; } } @media screen and (min-width: 640px) { .grid__link { height: 100%; display: grid; grid-auto-rows: 1fr; } } .item__bottom { border-top: 1px solid; } img { height: auto; display: block; width: 100%; } ul { list-style: none; } ul>li { display: inline-flex; border: 1px solid; margin: 4px; padding: 4px; } a { text-decoration: none; color: #000; } 

 <div class="grid__wrapper"> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/arch" class="flex__img"> <h2>Check back tomorrow;</h2> <p>I will see if the book has arrived.</p> </div> <div class="item__bottom"> <ul> <li>Learn More</li> </ul> </div> </a> </div> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/nature" class="flex__img"> <h2>I am happy</h2> <p>I am never at home on Sundays.</p> </div> <div class="item__bottom"> <ul> <li>Learn More</li> <li>Progressively matrix</li> <li>Uniquely build extensible</li> <li>seamless customer</li> </ul> </div> </a> </div> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/people" class="flex__img"> <h2>Malls are great places to shop</h2> <p>I can find everything I need under one roof.</p> </div> <div class="item__bottom"> <ul> <li>maximizing</li> <li>Monotonectally whiteboard</li> </ul> </div> </a> </div> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/tech" class="flex__img"> <h2>I want to buy</h2> <p>but know it won't suit me.</p> </div> <div class="item__bottom"> <ul> <li>Learn More</li> <li>task error-free</li> <li>Energistically</li> <li>practices</li> <li>ethical methodologies</li> <li>task error-free</li> </ul> </div> </a> </div> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/animals" class="flex__img"> <h2>Last Friday in three week</h2> <p>Blue worm shake hands with a legless lizard. Blue worm shake hands with a legless lizard. Blue worm shake hands with a legless lizard. Blue worm shake hands with a legless lizard. </p> </div> <div class="item__bottom"> <ul> <li>Learn More</li> <li>incubate</li> </ul> </div> </a> </div> <div class="grid__item"> <a class="grid__link" href="#"> <div> <img src="https://placeimg.com/640/480/animals/grayscale" class="flex__img"> <h2>She advised</h2> <p>him to come back at once.</p> </div> <div class="item__bottom"> <ul> <li>Learn More</li> <li>Seamlessly</li> <li>build excellent</li> </ul> </div> </a> </div> </div> 

Answer 2

To achieve expected result, set height for flex__bottom

Issue: flex__bottom height is not specified and child elements are not even , default height: auto will adjust height according to flex__bottom elements

.flex__bottom {
    border-top: 1px solid;
    height: 100px;
}

https://codepen.io/nagasai/pen/LMgxLg