CSS justify-content 属性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24052569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
justify-content property isn't working
提问by VEDA0095
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!
我有一个奇怪的问题，我遇到了麻烦。所以我一直在研究这个使用 flexbox 的原型 html5 模板。虽然我遇到了一个小问题。我试图通过将“justify-content”属性应用于父 div 来为模板的侧边栏和内容区域留出一个小空间。虽然它没有在侧边栏和内容区域之间添加那个空间。我不确定我做错了什么。所以如果有人可以帮助我，那就太好了。提前致谢！
Here's my html:
这是我的 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>
Here's the relevent css:
这是相关的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;
}
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.
注意：如果有人需要与我的 html 的任何其他元素相关的任何其他 css 代码，请告诉我，我也很乐意将其添加到问题中。
回答by dholbert
justify-contentonlyhas an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-contentwill do nothing.
justify-content仅当您的 flex 项目弯曲以吸收可用空间后仍有剩余空间时才有效。在大多数/许多情况下，不会有任何可用空间，并且实际上justify-content什么也不做。
Some examples where it wouldhave an effect:
它会产生影响的一些示例：
if your flex items are all inflexible (
flex: noneorflex: 0 0 auto), and smaller than the container.if your flex items are flexible, BUT can't grow to absorb all the free space, due to a
max-widthon each of the flexible items.
如果您的 flex 项目都是不灵活的（
flex: none或flex: 0 0 auto），并且小于容器。如果您的弹性项目是灵活的，但由于
max-width每个弹性项目上都有一个，因此无法增长以吸收所有可用空间。
In both of those cases, justify-contentwould be in charge of distributing the excess space.
在这两种情况下，justify-content都将负责分配多余的空间。
In your example, though, you have flex items that have flex: 1or flex: 6with no max-widthlimitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-contentto do anything with.
但是，在您的示例中，您的 flex 项目有flex: 1或flex: 6没有max-width限制。您的灵活项目将增长以吸收所有可用空间，并且将没有空间可用于justify-content做任何事情。
回答by technophyle
This answer might be stupid, but I spent quite some time to figure it out.
这个答案可能很愚蠢，但我花了很长时间才弄明白。
What happened to me was I didn'tset display: flexto the container. And of course, justify-contentwon't work without a container with that property.
发生在我身上的是我没有设置display: flex容器。当然，justify-content没有具有该属性的容器将无法工作。
回答by Andyg8
I had a further issue that foxed me for a while when theming existing code from a CMS. I wanted to use flexbox with justify-content:space-betweenbut the left and right elements weren't flush.
在对 CMS 中的现有代码进行主题化时，我还有一个问题困扰了我一段时间。我想使用 flexbox ，justify-content:space-between但左右元素不齐平。
In that system the items were floated and the container had a :beforeand/or an :afterto clear floats at beginning or end. So setting those sneaky :beforeand :afterelements to display:nonedid the trick.
在该系统中，项目是浮动的，并且容器在开始或结束时有一个:before和/或一个:after来清除浮动。因此，设置这些偷偷摸摸:before和:after元素，display:none并获得成功。
回答by David de Castro
I was having a lot of problems with justify-content, and I figured out the problem was "margin: 0 auto"
我在 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.
auto 部分覆盖 justify-content，因此它总是根据边距而不是 justify-content 显示。
回答by Madusara Liyanage
Go to inspect element and check if .justify-content-center is listed as a class name under 'Styles' tab. If not, probably you are using bootstrap v3 in which justify-content-center is not defined.
转到检查元素并检查 .justify-content-center 是否被列为“样式”选项卡下的类名。如果没有，可能您正在使用 bootstrap v3，其中未定义 justify-content-center。
If so, please update bootstrap, worked for me.
如果是这样，请更新引导程序，为我工作。
