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

请参阅这里的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;
}

  

    

      

      
This is some long long long long long long long long long long long long long long long long content
    
    

      
    
  
  

    

      

      
This is some content
    
    

      
    
  
  

    

      

      
This is some content