justify-content属性不工作 [英] justify-content property isn't working
问题描述
我有一个奇怪的问题，我遇到了麻烦。所以我一直在这个原型html5模板使用flexbox。虽然我遇到了一个小问题。我试图通过应用justify-content属性到父div的一个小空间到模板的边栏和内容区域。虽然它不是在侧栏和内容区域之间添加该空间。我不知道是什么，我做错了。所以如果有什么可以帮助我，将是伟大的。提前感谢！
I have an odd issue that I'm having trouble with. So I've been working on this prototype html5 template that uses flexbox. Though I've been running into one slight problem. I'm trying to a small space to the sidebar and content area of the template by applying the "justify-content" property to the parent div. Though it's not adding that space between the sidebar and content area. I'm not sure what it is that I'm doing wrong. So if any could help me that would be great. Thanks in advance!
这是我的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请让我知道，我会很高兴地添加到问题，以及。
NOTE: If anyone needs any other piece of my css code relating to any of other elements of my html please let me know, and I will happily add it into the question as well.
推荐答案
justify-content 一个效果，如果你的灵活项目已经弯曲以吸收自由空间后剩下的空间。在大多数/很多情况下，将不会有任何可用空间，并且确实 justify-content 将什么也不做。
有一些效果：
-
不灵活（
flex：none或flex：0 0 auto）并小于容器。
如果你的flex项是灵活的，但是不能增长来吸收所有的可用空间，因为 max-width
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
In both of those cases, justify-content would be in charge of distributing the excess space.
在你的例子中，你有flex项目有 flex：1 或 flex：6 ，没有 max-width 您的灵活项目将增长以吸收所有的可用空间，并且没有空间留给 justify-content 来做任何事情。
In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.
这篇关于justify-content属性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
