在容器的底部(而不是顶部)堆叠元素

Question

我有一个<ul>固定高度,我需要在<li>里面堆叠在底部(而不是顶部).

我试过vertical-align: bottom了,<ul>但这并没有改变任何东西.

内容li有可能溢出,如果有,我需要滚动条才能工作.

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/

谢谢 !

Answer 1

试试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边距用于将lis 对齐到底部.

虽然justify-content: flex-end也会将项目对齐到底部,但当项目溢出容器时,滚动机制不起作用(演示 | 错误报告).

顺便说一下,如果justify-content是flex-start或者center(演示),滚动就会起作用.