Свойство justify-content не работает

У меня есть странная проблема, с которой у меня проблемы. Поэтому я работал над этим прототипом шаблона html5, который использует flexbox. Хотя я столкнулся с одной небольшой проблемой. Я пытаюсь сделать небольшое пространство на боковой панели и области содержимого шаблона, применяя свойство "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;
}

ПРИМЕЧАНИЕ. Если кому-то нужен какой-либо другой фрагмент моего кода css, относящийся к любому из других элементов моего html, пожалуйста, дайте мне знать, и я с радостью добавлю его в вопрос.

Ответы

Ответ 1

justify-content действует только в том случае, если пространство осталось после того, как ваши элементы гибки согнулись, чтобы поглотить свободное пространство. В большинстве случаев во многих случаях не останется свободного места, и действительно justify-content ничего не сделает.

Некоторые примеры, где это будет иметь эффект:

  • если ваши элементы гибкости все негибкие (flex: none или flex: 0 0 auto) и меньше, чем контейнер.

  • если ваши гибкие элементы гибкие, НО не могут расти, чтобы поглотить все свободное пространство из-за max-width для каждого из гибких элементов.

В обоих случаях justify-content будет отвечать за распределение избыточного пространства.

В вашем примере, однако, у вас есть гибкие элементы с flex: 1 или flex: 6 без ограничения max-width. Ваши гибкие элементы будут расти, чтобы поглотить все свободное пространство, и для justify-content не останется места для чего-либо.

Ответ 2

Этот ответ может быть глупым, но я потратил некоторое время на то, чтобы найти аналогичную проблему.

Что случилось со мной, я не установил display: flex в контейнер. И, конечно, justify-content не будет работать без этого свойства.

Ответ 3

У меня возникла еще одна проблема, которая на некоторое время обманывала меня, когда они создавали существующий код из CMS. Я хотел использовать flexbox с justify-content:space-between -ween, но левый и правый элементы не были вровень.

В этой системе предметы плавали, и контейнер имел :before и/или an :after для очистки плаваний в начале или в конце. Так что установив те скрытые элементы :before и :after для display:none не сработал.

Ответ 4

Screenshot

Перейдите, чтобы проверить элемент и проверить, указан ли .justify-content-center в качестве имени класса на вкладке "Стили". Если нет, то, вероятно, вы используете bootstrap v3, в котором justify-content-center не определен.

Если так, пожалуйста, обновите bootstrap, у меня сработало.

Ответ 5

У меня было много проблем с justify-content, и я понял, что проблема заключается в "margin: 0 auto"

Авто часть переопределяет justify-content, поэтому она всегда отображается в соответствии с полем, а не с justify-content.