html - 在包含的 div 的底部对齐 flex nav 元素

Question

我正在尝试使用包含的 div 将底部图像的 3 个选项卡式元素(使用 ul flexbox 元素)对齐顶部，但对于我来说，我无法得到它们全部留在包含的 div 中。

如果我使用 position:absolute; bottom:0;它让一切变得更糟，所以我有点卡住了如何解决它!我也试过margin-top:auto在 <li> 上，这也没有帮助。

这是 JSFiddle:link或直接编码:

<div class="container">
  <img src="http://via.placeholder.com/400x400">
  <ul class=flextabs>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</div>

.container {
  width: 400px;
  height: 400px;
  background: blue;
  text-align: center;
  border:solid;
}

ul.flextabs {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
}
li {
    display:flex;
    flex-direction:column;
    flex: 1 0 auto;
    border:1px solid #000;
}
a {
    text-decoration:none;
    color:#000;
    background:red;
    padding:5px;
}
a:hover{background:orange;}

这是当前的结果:

与我想要实现的目标(上图已编辑)

Answer 1

我会在 ul 上使用 position: absolute; 将它放在容器的底部，并对其应用 flex -不是容器或 li。我还更改并添加了一些其他细节:

.container {
  width: 400px;
  height: 400px;
  background: blue;
  text-align: center;
  border: 2px solid black;
  position: relative;
}

ul.flextabs {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li {
  display: inline-block;
  width: 33.33%;
  border: 1px solid #000;
}

a {
  text-decoration: none;
  color: #000;
  background: red;
  padding: 5px;
  display: block;
}

a:hover {
  background: orange;
}

<div class="container">
  <img src="http://via.placeholder.com/400x400">
  <ul class=flextabs>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</div>