☰

justify-content プロパティが機能しないのはなぜですか? 質問する

tag-icon • tag-icon css flexbox spacing
justify-content プロパティが機能しないのはなぜですか? 質問する

親 div に「justify-content」プロパティを適用して、テンプレートのサイドバーとコンテンツ領域の間にスペースを追加しようとしていますが、サイドバーとコンテンツ領域の間にスペースが追加されません。何が間違っているのかわかりません。

#wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: row wrap;
    flex: 1 100%;
    width:92.5%;
    align-self: center;
    margin: 0;
}

#wrapper article.content-main {
    flex: 6;
    order: 2;
}

#wrapper article.content-main section {
    background-color: rgba(149, 21, 130, 0.61);
    border: 2px solid #c31cd9;
    padding: 0.9em;
}

#wrapper aside {
    flex: 1;
    padding: 0.4em;
    background-color: rgba(17, 208, 208, 0.56);
    border: 2px solid #15d0c3;
    position: sticky;
}
<body>
    <header>
        <h1>This is a placeholder <br />
            for header</h1>
    </header>
    <div id="wrapper">
        <article class="content-main">
            <section>
                <h2>Heading goes here...</h2>
                <time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
                <p>Content will go here...</p>
            </section>
        </article>
        <aside>
            <p>More content soon...</p>
        </aside>
    </div>
</body>

ベストアンサー1

justify-content のみフレックスアイテムがフレックスして空きスペースを吸収した後にスペースが残っている場合に効果があります。ほとんどの場合、空きスペースは残らず、実際にはjustify-content何も起こりません。

いくつかの例だろう効果がある:

  • flex: noneフレックス項目がすべて非フレキシブル (または)でありflex: 0 0 auto、コンテナーよりも小さい場合。

  • max-widthフレックス アイテムは柔軟ですが、各フレックス アイテムののため、すべての空き領域を吸収するまで拡張できません。

どちらの場合も、justify-content余剰スペースの分配を担当します。

ただし、あなたの例では、制限のある、flex: 1またはflex: 6制限のないフレックス アイテムがあります。 フレキシブル アイテムは大きくなり、空きスペースをすべて吸収してしまい、何もするmax-widthスペースが残らなくなります。justify-content

おすすめ記事