Flexbox高度被忽略

Question

有人可以帮助我这个。我不知道为什么我的身高：50％;规则在以下flexbox中被忽略。为了能见度，我围绕着所有的孩子。两行应占用相同的高度。

html, 
 
body { 
 
\t height: 100%; 
 
} 
 
.container { 
 
    display: flex; 
 
    position: relative; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: stretch; 
 
    height: 100vh; 
 
    width: 80%; \t 
 
\t /*padding-top: 2%; 
 
\t padding-bottom: 18%; 
 
    margin: 5% auto 8% auto; */ 
 
    background-color: white; 
 
\t border: 2px solid red; 
 
} 
 
.container h2 { 
 
\t color: orange; 
 
} 
 
.top { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-items: center; \t 
 
\t border: 2px solid blue; \t 
 
} 
 
.top * { 
 
\t 1 1 50%; 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t height: 100%; 
 
} 
 
.bottom { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: space-around; 
 
\t align-items: flex-start; 
 
\t border: 2px solid orange; 
 
} 
 
.top, 
 
.bottom { 
 
\t flex: 0 0 100%; 
 
\t height: 50%; 
 
} 
 
.topa { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t /* border: 2px solid orange; */ 
 
\t height: 100%; 
 
\t background-color: orange; 
 
} 
 
.topa inner { 
 
width: auto; 
 
height: auto; 
 
} 
 
.topb { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t border: 2px solid purple; 
 
\t background-color: black; 
 
\t height: 100%; 
 
}

<div id="bigwrap"> 
 
\t <div class="container"> 
 
    \t <div class="top"> 
 
     \t <div class="topa"> 
 
      \t <div class="inner"> 
 
      \t \t <img src="chocolate.jpg" width="209" height="205" alt="Picture of kid" /> 
 
       </div> 
 
      \t <div class="inner"> 
 
      \t  <img src="cookies.jpg" width="209" height="205" alt="Picture of kid" /> 
 
      </div> 
 
      <div class="topb"> 
 
      </div>   
 
     </div> 
 
     <div class="bottom"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你的HTML需要一些清理。您的div没有正确打开和关闭。应该是这样的：

<div id="bigwrap"> 
    <div class="container"> 
    <div class="top"> 
     <div class="topa"> 
     <div class="inner"> 
      <img src="chocolate.jpg" width="209" height="205" alt="Picture of kid" /> 
     </div> 
     <div class="inner"> 
      <img src="cookies.jpg" width="209" height="205" alt="Picture of kid" /> 
     </div> 
     <div class="topb"> 
     </div>   
     </div> 
    </div> 
    <div class="bottom"> 
    </div> 
    </div> 
</div> 

这里是一个的jsfiddle证明：https://jsfiddle.net/6pLcn9bu/