垂直对齐 flex 1 内容

Question

I have a list where one of the items breaks onto two lines.

I need to keep all <li> elements the same height, but also center align them, which I can't seem to do ( code on CodePen ):

 #test ul{ display:flex; border:1px solid black; list-style: none; padding-left:0; } #test li{ flex: 1; width:33.333333%; border-left:1px solid black; padding:10px; }

 <div id="test"> <ul> <li> <a href="">Two line Text</a><br/> <a href="">Two line Text</a> </li> <li> <a href="">One line Text</a> </li> <li> <a href="">One line Text</a> </li> </ul> </div>

How can I do what I'm trying to without using any hacky paddings, margins, or heights on the "One line Text" elements? If I use the suggested align-items: center on the ul , then the borders no longer look correct, as the element is no longer full height.

Answer 1

align-items defaults to stretch , which make the li fill the height of the ul .

Change it to center , by adding align-items: center; to the #test ul rule, will align them vertically centered (this will make the li collapse to their content though)

 #test ul { display:flex; align-items: center; /* added */ border:1px solid black; list-style: none; padding-left:0; } #test li { flex: 1; width:33.333333%; border-left:1px solid black; padding:10px; }

 <div id="test"> <ul> <li> <a href="">Two line Text</a><br/> <a href="">Two line Text</a> </li> <li> <a href="">One line Text</a> </li> <li> <a href="">One line Text</a> </li> </ul> </div>

---

Or make the li a flex container and vertical align the a using justify-content: center , which btw defaults to flex-start .

Why the use of column direction and justify-content , because there is 2 items and you most likely want to stack them on top of each other.

 #test ul{ display:flex; border:1px solid black; list-style: none; padding-left:0; } #test li{ flex: 1; width:33.333333%; border-left:1px solid black; padding:10px; display:flex; /* added */ flex-direction: column; /* added */ justify-content: center; /* added */ }

 <div id="test"> <ul> <li> <a href="">Two line Text</a> <a href="">Two line Text</a> </li> <li> <a href="">One line Text</a> </li> <li> <a href="">One line Text</a> </li> </ul> </div>

---

If there is only 1 item with two lines of text, we can use the default row direction and align-items

 #test ul{ display:flex; border:1px solid black; list-style: none; padding-left:0; } #test li{ flex: 1; width:33.333333%; border-left:1px solid black; padding:10px; display:flex; /* added */ align-items: center; /* added */ }

 <div id="test"> <ul> <li> <a href="">Two line Text<br>Two line Text</a> </li> <li> <a href="">One line Text</a> </li> <li> <a href="">One line Text</a> </li> </ul> </div>

Answer 2

You need to change the HTML structure a little bit & apply align-items: stretch to ul .

#test ul {
  display: flex;
  align-items: stretch;
}

And inside li create a .inner div and give it display: flex with align-items: center .

#test li {
  flex: 1;
  display: flex;
  align-items: center;
}

Have a look at the working snippet below:

 #test ul{ display: flex; align-items: stretch; border: 1px solid black; list-style: none; padding-left: 0; } #test li { flex: 1; display: flex; align-items: center; border-left: 1px solid black; } #test li:first-child { border-left: none; } #test li .inner { padding: 10px; }

 <div id="test"> <ul> <li> <div class="inner"> <a href="">Two line Text</a><br/> <a href="">Two line Text</a> </div> </li> <li> <div class="inner"> <a href="">One line Text</a> </div> </li> <li> <div class="inner"> <a href="">One line Text</a> </div> </li> </ul> </div>

Hope this helps!