我试图通过将“justify-content”属性应用到父 div 来在模板的侧边栏和内容区域之间添加一些空间，但它并没有在侧边栏和内容区域之间添加该空间。我不确定我做错了什么。
#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>
justify-content only如果您的弹性项目弯曲以吸收可用空间后仍有剩余空间，则会产生影响。在大多数/许多情况下，不会剩下任何可用空间，而且确实justify-content不会做任何事。
一些例子would有效果：
在这两种情况下，justify-content将负责分配多余的空间。
不过，在您的示例中，您的弹性项目具有flex: 1 or flex: 6没有max-width局限性。您的灵活物品将增长以吸收所有可用空间，并且将没有剩余空间justify-content做任何事情。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
