Alexandre Danault Alexandre Danault - 4 months ago 10
HTML Question

Stack li's at bottom of ul

I have a

<ul>
that has a fixed height and I need the
<li>
's inside it to stack at the bottom (instead of the top).

I tried
vertical-align: bottom
on the
<ul>
but that doesn't change anything.



ul {
border: 1px solid red;
height: 250px;
vertical-align: bottom;
}
li {}

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>





JsFiddle: https://jsfiddle.net/hbcnvk4s/

EDIT: I forgot to specify that the content
li
have a chance of overflowing, and if they do I need the scrollbar to work.

Thanks !

Answer

Try CSS flexbox:

ul {
  display: flex;           /* establish flex container */
  flex-direction: column;  /* align children vertically */
  border: 1px solid red;
  height: 250px;
}

li:first-child {
  margin-top: auto;        /* shift top li, and all li's beneath, to the bottom */  
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Flex auto margins are used to align the lis to the bottom.

Although justify-content: flex-end also shifts the items to the bottom, when the items overflow the container, the scroll mechanism doesn't work (demo).

As an aside, scrolling would work if justify-content were flex-start or center (demo).


Learn more about flexbox here:


Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.