2

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>

2
  • Si eliminas flex: 1; funciona.
    – alanfcm
    Commented el 5 jun. 2019 a las 18:27
  • Los necesito alineados todos con el fondo también, la misma altura. Commented el 5 jun. 2019 a las 18:29

1 respuesta 1

3

Quité el justify y el center. Pero no estoy seguro si era esto lo que querías.

Por lo pronto tienen la misma altura y están alineados arriba.

.abouts {
  display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
  text-align: center;
  align-self: stretch;
  flex: 1 1 1;
 
}

.abouts .item-wrapper {
  width:33%;
  display: flex;
  flex-direction:column;
  justify-content: center;
  margin: 5px;
  padding: 15px;
  background-color: rgba(0,0,0,0.1);  
}

.item {
  
}
<div class="abouts">
  <!-- ITEM -->
  <div class="item-wrapper">
    <div class="item">
      <h3>Vision</h3>
      <p>Content here details, more content height...</p>
    </div>
   </div>
  <!--/ ITEM -->
  
  <!-- ITEM -->
  <div class="item-wrapper">
    <div class="item">
      <h3>Vision</h3>
      <p>Content here details...</p>
    </div>
  </div>
  <!--/ ITEM -->
  
  <!-- ITEM -->
  <div class="item-wrapper">
    <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>
  </div>
  <!--/ ITEM -->
</div>

2
  • Pero el contenido no esta centrado verticalmente, eso es lo que necesito. Commented el 5 jun. 2019 a las 18:30
  • Perfecto! Muchas gracias. Commented el 5 jun. 2019 a las 19:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.