“justify-content”属性不起作用

我有一个奇怪的问题，我遇到了麻烦。我一直在研究此原型HTML5模板Flexbox。尽管我一直遇到一个小问题。

我正在尝试通过将" Jusify-content"属性应用于父级，到达模板的侧边栏和内容区域。尽管它没有在侧栏和内容区域之间添加该空间。我不确定我做错了什么。因此，如果有人可以帮助我，那就太好了。

这是我的 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代码中的其他任何部分，请告诉我，我也很乐意将其添加到问题中。

答案

justify-content 仅有的 如果您的弹性物品弯曲以吸收自由空间后，则剩下的空间会产生影响。在大多数/许多情况下，都不会剩下任何可用空间，实际上justify-content不会做任何事情。

一些例子会有效果：

如果您的弹性物品都不灵活（flex: none或者flex: 0 0 auto），并且小于容器。
如果您的弹性项目很灵活，但由于以下原因无法增长以吸收所有可用空间max-width在每个灵活的项目上。

在这两种情况下，justify-content将负责分配多余的空间。

不过，在您的示例中，您的弹性项目具有flex: 1或者flex: 6没有max-width局限性。justify-content做任何事情。

来自: stackoverflow.com

答案#

答案