“证明内容”属性不起作用

我有一个奇怪的问题，我有麻烦。我一直在开发这个使用 Flexbox的原型 HTML5模板。不过我遇到了一个小问题。

我试图通过对父 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 的任何其他元素，请让我知道，我会很高兴地添加到这个问题以及。

279978

小开

最佳答案

justify-content 只有有一个效果，如果有剩余的空间后，你的伸缩项目已经弯曲，以吸收自由的空间。在大多数/许多情况下，不会有任何剩余空间，实际上 justify-content什么也不做。

会产生影响的一些例子:

如果您的弹性项目都是不灵活的(flex: none或 flex: 0 0 auto) ，并小于容器。
if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.

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

但是，在您的示例中，Flex 项具有 flex: 1或 flex: 6，没有 max-width限制。你的弹性项目将增长，以吸收所有的自由空间，将没有空间留给 justify-content做任何事情。

小开

这个答案可能很愚蠢，但我花了很长时间才弄明白。

我没有将 display: flex设置为容器(带有 justify-content属性的元素)。当然，如果没有这个属性，justify-content就无法工作。

小开

我还有一个更深层次的问题，在对 CMS 中的现有代码进行主题化时，这个问题困扰了我一段时间。我想使用柔性与 justify-content:space-between的元素，但左和右不齐平。

在这个系统中，物品是浮动的，容器有一个 :before和/或一个 :after来清除开始或结束时的浮动。因此，设置那些鬼鬼祟祟的 :before和 :after元素到 display:none就可以了。

小开

去检查元素和检查是否。在“样式”选项卡下面，以类名的形式列出了  。如果没有，那么您可能正在使用引导程序 v3，其中没有定义调整内容中心。

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

小开

我在 justify-content上遇到了很多问题，我发现问题出在 margin: 0 auto上

The auto part overrides the justify-content so its always displayed according to the margin and not to the justify-content.

小开

Sometimes justify-content just isn't the property you should use. This is especially true when your flex-direction is column which makes the main axis vertical (y). You should try the align-item property, that may be the charm.

小开

始终确保为您的容器指定 width和 height + 为容器内的元素设置 padding : 0 (or auto) ;和 margin : 0 (or auto) ;也可能有所帮助

小开

应该有更多的空间供 justify-content使用。

您可以使用 flex-basis并给出一个值，例如，40% 。

就这么简单

.content-main{
flex-basis: 40%;
}
aside{
flex-basis: 40px;
}

小开

如果,

justify-content: space-between;

不能正常工作，请确保:

  display: flex;
flex-direction: column;

然后再试试

display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;