CSS Flexbox - 相对于父元素居中所有具有全高的子元素[重复]

Question

我需要将所有子元素与父元素的全高对齐。

一切都很好，直到我使用 align-items: center; 属性，我对齐元素但它没有覆盖 100%，如果我使用 align-self:stretch; 覆盖 100% 但不垂直对齐元素，对此有一些解决方案。

.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>

Answer 1

让.abouts flex 父级使用align-items: stretch 使.item 子级具有父级的高度。然后（你可以）让.item 孩子自己变成弹性父母。然后，您必须调整文本边距 (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>