将元素与Flexbox中的底部对齐，而不使用position：absolute

Question

请在此处查看jsfiddle：https://jsfiddle.net/q3ob7h1o/1/ 或者只是在这里阅读：

代码

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.content {
  background: beige;
}
.footer {
  background: teal;
}

<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

我想做什么

我要做的是让.footer div与每个.tile元素的底部对齐，这样无论每个图块中的内容量如何，页脚都会排成一行。

我知道我可以在页脚上使用position: absolute但我宁愿避免这种情况，因为页脚的高度可能不知道。

我尝试将.tile转换为Flexbox本身并将其方向设置为列，但这不起作用。我也尝试将每个瓷砖转换成一个表格单元格，但这也不起作用。

让我失望的是我试图在现有flexbox的一个子元素中定位一个元素。我申请的任何弹性框属性都适用于.tile，而非.footer

非常感谢帮助：）

Answer 1

尝试以下解决方案：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction:column;
}
.content {
  background: beige;
}
.footer {
  background: teal;

}

＆＃13;

<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

您可以在此处找到更新的小提琴：https://jsfiddle.net/q3ob7h1o/2/