私のフレックスは、定義されたフレックスベースでも機能しないのはなぜですか？

Question

3つのボックスが画面の高さを1：4：1の比率で埋めるようにします。

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.container{ 
 
    display: flex; 
 
    flex-direction:column; 
 
    align-items: center; 
 
    height:100100%; 
 
    width:100%; 
 
} 
 
.title{ 
 
    
 
    background:yellow; 
 
    flex-basis:30px; 
 
    flex-grow:1; 
 
} 
 
.box{ 
 
    background:green; 
 
    flex-basis:120px; 
 
    flex-grow:4; 
 

 
} 
 

 
.buttons{ 
 
    background:red; 
 
    flex-basis:30px; 
 
    flex-grow:1; 
 
    }

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <div class="title"> 
 
    Random Quote Generator 
 
    </div> 
 
    <div class="box"> 
 
    This is Where Author and Quote go. 
 
    </div> 
 
    <p class="blank"></p> 
 
    <div class="buttons"> 
 
    <a class="button"><i class="fa fa-twitter"></i></a> 
 
    <a class=button><i class="fa fa-tumblr"></i></a> 
 
    <a class='button'><i class="fa fa-chevron-right"></i></a> 
 
    </div> 
 
</div>

Answer 1

あなたは割合の高さを使用しています。そのためには、親要素の高さを定義する必要があります。それはやりにくくなる。ここをクリックしてください：Working with the CSS height property and percentage values

代わりに、ちょうどheight: 100vhを使用してください。これはずっと簡単で簡単です。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100vh; /* NEW */ 
 
    width: 100%; 
 
} 
 

 
.title { 
 
    background: yellow; 
 
    flex: 1 0 30px; 
 
} 
 

 
.box { 
 
    background: green; 
 
    flex: 4 0 120px; 
 
} 
 

 
.buttons { 
 
    background: red; 
 
    flex: 1 0 30px; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <div class="title"> 
 
    Random Quote Generator 
 
    </div> 
 
    <div class="box"> 
 
    This is Where Author and Quote go. 
 
    </div> 
 
    <p class="blank"></p> 
 
    <div class="buttons"> 
 
    <a class="button"><i class="fa fa-twitter"></i></a> 
 
    <a class=button><i class="fa fa-tumblr"></i></a> 
 
    <a class='button'><i class="fa fa-chevron-right"></i></a> 
 
    </div> 
 
</div>