フレックスのalign-contentとjustify-contentが期待どおりに動作しない

Question

align-contentとjustify-contentは、ChromeとFirefoxで実行しても何もしないようです。

何が問題なのかよく分かりません。

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    height: 90vh; 
 
} 
 
#header { 
 
    flex: 1 0 200px; 
 
    background-color: lightgreen; 
 
    height: 200px; 
 
    border-radius: 1rem; 
 
} 
 
#main { 
 
    flex: 1 0 200px; 
 
    background-color: coral; 
 
    height: 200px; 
 
    border-radius: 1rem; 
 
} 
 
#footer { 
 
    flex: 1 0 200px; 
 
    background-color: silver; 
 
    height: 200px; 
 
    border-radius: 1rem; 
 
} 
 
@media screen and (max-width: 915px) { 
 
    #container { 
 
    flex-flow: column wrap-reverse; 
 
    } 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="main">Main</div> 
 
    <div id="footer">Footer</div> 
 
</div>

Answer 1

彼らはあなたがそれらを求めている正確に何をやっています。ここで間違っているのは、flex定義です。

あなたがそれらを200pxそれぞれになりたい場合は、あなたはそれをあなたがあなたの速記flex-grow: *1* 0 200pxでやっている1のflex-grow価値を与えるべきではありません。

代わりに、などflex性質書き換える：align-contentが機能しない理由については

#header { 
    flex: 0 0 200px; 
    ... 
} 

Working JSFiddle

を、あなただけのアイテムの1行を持っているので、それは何の関係もありません。

ALIGN-コンテンツ

これは、コンテンツが正当化-メイン軸内の個々のアイテムを整列する方法に類似のクロス軸に余分なスペースがあり、とき内フレックスコンテナのラインを揃えます。

注：フレックスアイテムの行が1行だけの場合、このプロパティは効果がありません。

：私はあなたが欲しいものを推測しているCSS-Tricks

はあなたがalign-contentをしたくない、その場合には、水平垂直とを中央にある、あなたはalign-itemsをしたいです。

align-content: centerをalign-items: centerに置き換え、垂直センタリングを取得してください。

JSFiddle example of align-items