html - tipos - Alinee un elemento con la parte inferior dentro de una caja flexible, sin usar la posición: absoluta

tipos de html

Question

Consulte jsfiddle aquí: https://jsfiddle.net/q3ob7h1o/1/ O simplemente léalo aquí si prefiere:

Código

* {
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>

Lo que trato de hacer

Lo que intento hacer es que el .footer div se alinee con la parte inferior de cada uno de los elementos .tile , de modo que, independientemente de la cantidad de contenido en cada mosaico, los pies de página se alineen.

Sé que puedo usar position: absolute en el pie de página, pero preferiría evitar esto ya que la altura del pie de página podría no ser conocida.

Intenté convertir .tile en una flexbox y establecer su dirección en la columna, pero esto no funcionó. También traté de convertir cada tesela en una celda de tabla, pero tampoco funcionó.

Lo que me está lanzando es que estoy tratando de apuntar a un elemento dentro de uno de los hijos de un flexbox existente. Cualquier propiedad de flexbox que aplico se aplica a .tile , no .footer

Ayuda muy apreciada :)

Answer 1

Pruebe la siguiente solución:

* {
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>

El violín actualizado puede encontrarlo aquí: https://jsfiddle.net/q3ob7h1o/2/