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

让var firstDay = new Date().toISOString().slice(0, 8) + '01'; console.log(firstDay);灵活的父母使用.abouts来使align-items: stretch的孩子承担其父母的身高。然后（您可以）使.item个孩子自己成为灵活的父母。然后，您必须调整文本边距（because there is no margin collapse in flex formatting）

.item

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

CSS Flexbox-将所有子元素以相对于父元素的完整高度居中

1 个答案: