时间戳

首页 > 解决方案 > CSS Flexbox - 将所有相对于父元素的全高子元素居中

html - CSS Flexbox - 将所有相对于父元素的全高子元素居中

问题描述

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

一切都很好，直到我使用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>

标签： htmlcssflexbox

解决方案

让.aboutsflex 父级align-items: stretch用来让.item子级采用父级的高度。然后（你可以）让.item孩子们自己成为灵活的父母。然后，您必须调整文本边距（因为 flex 格式中没有边距折叠）

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

推荐阅读