证明内容属性不起作用

Question 1

我遇到一个奇怪的问题。因此，我一直在研究使用flexbox的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代码的其他任何部分，请告诉我，我也很乐意将其添加到问题中。

Question 2

justify-content 仅在弹性物品屈曲以吸收可用空间后才剩下空间时才起作用。在大多数/许多情况下，将没有剩余的可用空间，并且实际上justify-content什么也做不了。

可能会产生影响的一些示例：

如果您的伸缩商品全部为非柔性商品（flex: none或flex: 0 0 auto），并且小于容器。
如果您的弹性商品是柔性商品，则由于max-width每个柔性商品上的，BUT无法增长以吸收所有可用空间。

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

但是，在您的示例中，您有没有限制flex: 1或flex: 6没有max-width限制的弹性项目。您的柔性物品将逐渐吸收所有可用空间，并且将没有任何空间justify-content可做任何事情。

Question 3

这个答案可能很愚蠢，但是我花了很多时间来弄清楚。

发生了什么事我是我没设置display: flex到容器中。当然，justify-content没有具有该属性的容器也将无法工作。

Question 4

在设置来自CMS的现有代码的主题时，还有一个问题使我困扰了一段时间。我想将flexbox与justify-content:space-between但是左右元素不是齐平的。

在该系统中，物品被漂浮，并且容器在开始或结束时有一个:before和/或一个:after用于清除漂浮物。因此，设置这些偷偷摸摸:before和:after元素，display:none并获得成功。

Question 5

我在证明内容方面存在很多问题，并且发现问题出在“保证金：0自动”

汽车零件会覆盖正当性内容，因此它始终根据边距而不是正当性内容显示。

Question 6

去检查元素并检查.justify-content-center是否在“样式”选项卡下作为类名列出。如果不是，则可能是您使用的引导程序v3中未定义justify-content-center。

如果是这样，请更新引导程序，为我工作。