Necesito alinear todos los elementos hijos, con altura completa relativa al elemento principal.
Todo está bien hasta que uso la propiedad align-items: center; , los elementos se alinean completamente, pero no cubren el 100% de la altura, y si uso align-self: stretch; cubre el 100% pero no alinea los elementos verticalmente, hay alguna solución para esto.
.abouts {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
align-self: stretch;
}
.abouts .item {
flex: 1;
margin: 5px;
padding: 15px;
background-color: rgba(0,0,0,0.1);
}
<div class="abouts">
<!-- ITEM -->
<div class="item">
<h3>Vision</h3>
<p>Content here details, more content height...</p>
</div>
<!--/ ITEM -->
<!-- ITEM -->
<div class="item">
<h3>Vision</h3>
<p>Content here details...</p>
</div>
<!--/ ITEM -->
<!-- ITEM -->
<div class="item">
<h3>Vision</h3>
<p>Content here details, more content for test equal height all elements more content for test equal height all elements...</p>
</div>
<!--/ ITEM -->
</div>
flex: 1;
funciona.