2

I need to align all child elements with full height relative to the parent element.

Everything is fine until I use the align-items: center; property, I align the elements but it does not cover 100%, and if I use align-self: stretch; covers 100% but does not align the elements vertically, there is some solution for this.

.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>
Learning and sharing
  • 1,378
  • 3
  • 25
  • 45

1 Answers1

3

Let the .abouts flex parent use align-items: stretch to make the .item children take on their parent's height. Then (you could) make the .item children into flex parents themselves. You'll then have to adjust your text margins (because there is no margin collapse in flex formatting)

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


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

.abouts .item {
  flex: 1;
  margin: 5px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<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>
Ito Pizarro
  • 1,607
  • 1
  • 11
  • 21
  • No problem. Much of my understanding of the flex model comes from https://css-tricks.com/snippets/css/a-guide-to-flexbox/… it's a **really good** breakdown of all the properties. – Ito Pizarro Jun 05 '19 at 18:36