如何删除继承父高度的弹性项目[重复]答案

【问题标题】：How to remove flex-items inheriting parent height [duplicate]如何删除继承父高度的弹性项目[重复]
【发布时间】：2017-07-04 02:20:59
【问题描述】：

我有以下布局：

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

我想要完成的是.zavod 和.ekipa 具有不同的高度。现在这可以在单个 flex 容器中使用，但是当我嵌套多个容器时它不起作用。

我做错了什么？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果我理解您的问题代码将是这样的。只需添加.content-container{flex-direction: column;}、.view-content{align-items: flex-start;flex-direction: row;}。这就对了。你需要阅读csstricks flexbox guide。

.content-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-content {
  align-items: flex-start; /* If you want to set two column top align */
  /* align-items: center; If you want to set tow column vertically center */
  /* align-items: flex-end; If you want to set column align on bottom center */
  /* align-items: stretch; If you want to set two column same height */
  /* align-items: baseline; If you want to set two column align by text align */
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

【讨论】：

【解决方案2】：

对于信息，在某些情况下，您还可以重置您希望它远离的一侧的边距

.content-container {
  min-height: 100vh;
  background:gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}
section {
  margin :auto 0;
  }

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

【讨论】：

【解决方案3】：

将align-items: center; 添加到容器中

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

【讨论】：

【解决方案4】：

在 .view-content 容器上将 align-items 属性设置为 flex-start。 align-items 默认为 stretch，这就是为什么 .zavod 和 .ekipa 都被“拉伸”以匹配彼此的高度：

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

Here's a lovely guide 关于如何使用我不时提到的 flexbox。

【讨论】：