在包含div的底部对齐flex导航项

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;}

这是目前的结果：

vs我想要实现的目标（上图编辑）

Answer 1

我会在position: absolute;上使用ul将其放置在容器的底部，并将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>