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

Posted 2023-03-05

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

【英文标题】：CSS Flexbox - Center all child elements with full height relative to the parent element [duplicate]

【发布时间】：2019-10-21 06:48:59

【问题描述】：

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

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

【问题讨论】：

问题的解释和各种解决方案在副本中提供。

【参考方案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>

【讨论】：

没问题。我对 flex 模型的大部分理解来自 css-tricks.com/snippets/css/a-guide-to-flexbox……它是对所有属性的非常好的分解。