将元素与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元素的底部，这样无论每个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/