web-dev-qa-db-ja.com

justify-contentプロパティが機能していません

私は問題を抱えている奇妙な問題を抱えています。そのため、フレックスボックスを使用するこのプロトタイプhtml5テンプレートに取り組んでいます。ちょっとした問題にぶつかりましたが。 「justify-content」プロパティを親divに適用して、テンプレートのサイドバーとコンテンツ領域に小さなスペースを配置しようとしています。ただし、サイドバーとコンテンツ領域の間にスペースを追加するわけではありません。私が間違っているのは何なのかわかりません。だから、もし私を助けることができれば、それは素晴らしいことです。前もって感謝します！

これが私のhtmlです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/>
    <title>Welcome to My Domain</title>
</head>
<body>    
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>
            <nav class="main">
                <div class="mobilmenu"></div>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>    
            </nav>
            <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>
        <footer>
                <div class="copyright">
                    <span>All rights reserved 2014.</span>
                </div>
            <nav class="foot">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Pictures</a></li>
                    <li><a href="#">Audio</a></li>
                    <li><a href="#">Other Work</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
            </nav>
        </footer>               
   </body>
</html>

関連するCSSは次のとおりです。

#wrapper
{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: row wrap;
flex: 1 100%;
width:92.5%;
align-self: center;
padding-top: 3.5em;
padding-bottom: 2.5em;
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;
}

注：htmlの他の要素に関連するCSSコードの他の部分が必要な場合はお知らせください。質問にも喜んで追加します。

cssflexboxspacingarticle
40
VEDA0095

justify-contentonlyは、フレックスアイテムがフリースペースを吸収するためにフレックスした後にスペースが残っている場合に効果があります。ほとんどの場合/多くの場合、空き領域はまったくなく、実際にjustify-contentは何もしません。

wouldが効果を発揮する例：

  • フレックスアイテムがすべて柔軟性がなく（flex: noneまたはflex: 0 0 auto）、コンテナよりも小さい場合。

  • フレックスアイテムが柔軟な場合、ただし、各柔軟なアイテムにmax-widthがあるため、すべての空き領域を吸収するために成長することはできません。

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

ただし、この例では、flex: 1またはflex: 6があり、max-widthの制限がないフレックスアイテムがあります。柔軟なアイテムは、すべての空きスペースを吸収するように成長し、justify-contentが何かをするためのスペースが残りません。

81
dholbert

この答えはばかげているかもしれませんが、私は少し時間をかけて同様の問題を見つけました。

私に起こったことは、私がなかったdisplay: flexをコンテナに設定することでした。そしてもちろん、justify-contentはそのプロパティなしでは機能しません。

18
technophyle

CMSの既存のコードをテーマにすると、しばらくの間私を混乱させた問題がありました。 flexboxをjustify-content:space-betweenで使用したかったのですが、左右の要素がフラッシュしていませんでした。

そのシステムでは、アイテムはフロートされ、コンテナには:beforeおよび/または:afterがあり、開始または終了時にフロートをクリアしました。そのため、これらの卑劣な:beforeおよび:after要素をdisplay:noneに設定することは、トリックを行いました。

8
Andyg8

Justify-contentで多くの問題が発生していましたが、問題は「margin：0 auto」であることがわかりました。

Autoパーツはjustify-contentをオーバーライドするため、justify-contentではなく、常にマージンに従って表示されます。

0
David de Castro

Screenshot

要素の検査に進み、「スタイル」タブの下にクラス名として.justify-content-centerがリストされているかどうかを確認します。そうでない場合は、おそらくjustify-content-centerが定義されていないbootstrap v3を使用しています。

もしそうなら、私のために働いたブートストラップを更新してください。

0
Madusara Liyanage