如何删除继承父高度的flex-items

Question

我有以下布局：

.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容器中运行，但是当我嵌套多个容器时，它不起作用。

我做错了什么？

Answer 1

如果我理解您的问题代码将是这样的。只需添加Separator.Iterator.Element == Iterator.Element.Iterator.Element，.content-container{flex-direction: column;}即可。这就对了。您需要阅读csstricks flexbox guide。

＆＃13;

＆＃13;

.view-content{align-items: flex-start;flex-direction: row;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

Answer 3

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

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

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;