フレックスボックスの整列内容が項目間にスペースを残さない

フレックスボックスalign-contentについての資料は、stack overflowとcss-tricksという2つの場所で参照されました。フレックスボックスの整列内容が項目間にスペースを残さない

そして、100％の高さと同じ高さの異なる色の3つの水平バーを配置しようとしました。

フレックスコンテナの場合、align-contentをspace-betweenと設定します。しかし、まだ、すべての縞は密接に隙間なく詰まっています。

どのようにして、ストライプの下の空き領域を強制的に&の周りに等しく分布させることができますか？

プランカコードはhereです。

<body style="height:100%;"> 
 
    <div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;align-content:space-between;"> 
 
    <div style="height:100px;background-color:#222222;width:100%;"> 
 
    </div> 
 
    <div style="height:100px;background-color:#777777; width:100%;"> 
 
    </div> 
 
    <div style="height:100px;background-color:pink; width:100%;"> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-09-03 Madhavan Kumar

コード助けを求める質問は、質問自体に**それを再現するために必要な最短のコードを含める必要があります**好ましくは[**スタックスニペット**]（HTTPSで：//ブログ.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

@Paulie_Dは正しいです。特にあなたの高い担当者レベルでは、このような質の低い質問はちょっと驚くべきことです。基本的な質問は悪くないので、私は編集しました。将来の訪問者は利益を得るかもしれません。 –

あなたがjustify-content: space-between;を使用する必要がありますhtmlと次にheight: 100%を設定する必要がありまず。デフォルトflex-directionにより

はrowと主軸左にされている水平主軸に沿って右またはそうjustify-content位置要素です。しかしflex-directionをcolumnに変更すると、主軸は上から下に変更され、justify-contentでは主軸に沿った位置要素が変更されますが、現在は垂直軸に変更されています。

html { 
 
    height: 100%; 
 
}

<body style="height:100%;"> 
 
    <div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;justify-content:space-between;"> 
 
    <div style="height:100px;background-color:#222222;width:100%;"> 
 
    </div> 
 
    <div style="height:100px;background-color:#777777; width:100%;"> 
 
    </div> 
 
    <div style="height:100px;background-color:pink; width:100%;"> 
 
    </div> 
 
    </div>

出典

2016-09-03 13:45:37

ありがとうNenad ..私は、正当化されたコンテンツセンターは常に水平になっていると思っています。主軸に沿ってコンテンツ中心を正当化すると思われます... –

私はいくつかの説明で私の答えを更新しました。 –

フレックスボックスの整列内容が項目間にスペースを残さない

答えて

関連する問題