Vertically aligning flex 1 content - html

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>
Two line Text<br/>
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</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>
Two line Text<br/>
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</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>
Two line Text
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</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>
Two line Text<br>Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</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">
Two line Text<br/>
Two line Text
</div>
</li>
<li>
<div class="inner">
One line Text
</div>
</li>
<li>
<div class="inner">
One line Text
</div>
</li>
</ul>
</div>
Hope this helps!