将元素与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>

我想做什么

我想要做的是让.footerdiv与每个.tile元素的底部对齐,这样无论每个tile中的内容量如何,页脚都会排成一行.

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

我试着.tile变成一个flexbox本身并将其方向设置为列,但这不起作用.我也尝试将每个瓷砖变成一个表格单元格,但这也不起作用.

抛弃我的是我试图在现有的flexbox的一个子元素中定位一个元素.我申请的任何Flexbox的属性适用于.tile,不.footer

非常感谢:)

Answer 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: flex;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction:column;
}
.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>

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