'justify-content' 属性不起作用
[英]The 'justify-content' property isn't working
问题描述
I have an odd issue that I'm having trouble with.
我有一个奇怪的问题，我遇到了麻烦。 I've been working on this prototype HTML5 template that uses Flexbox .我一直在研究这个原型 HTML5 模板，它使用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.我试图通过将“justify-content”属性应用于父 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.因此，如果有人可以帮助我，那就太好了。
Here's my HTML content:这是我的 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 relevant 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 代码的任何其他部分，请告诉我，我也很乐意将其添加到问题中。
7 个解决方案
解决方案1
183 已采纳 2014-06-06 06:29:44
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. justify-content仅在您的弹性项目弯曲以吸收可用空间后剩余空间时才有效。 In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.在大多数/许多情况下，不会有任何可用空间，而且justify-content确实不会做任何事情。
Some examples where it would have an effect:它会产生影响的一些示例：
if your flex items are all inflexible (
flex: noneorflex: 0 0 auto), and smaller than the container.如果您的弹性项目都是不灵活的（ 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-widthon each of the flexible items.如果您的弹性项目是灵活的，但由于每个弹性项目的max-width，它不能增长以吸收所有可用空间。
In both of those cases, justify-content would be in charge of distributing the excess space.在这两种情况下， justify-content将负责分配多余的空间。
In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation.但是，在您的示例中，您有具有flex: 1或flex: 6且没有max-width弹性项目。 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使用。
解决方案2
55 2018-01-15 02:57:38
This answer might be stupid, but I spent quite some time to figure it out.这个答案可能很愚蠢，但我花了很长时间才弄清楚。 What happened to me was I didn't set display: flex to the container.发生在我身上的是我没有设置display: flex到容器。 And of course, justify-content won't work without a container with that property.当然，如果没有具有该属性的容器， justify-content将无法工作。
解决方案3
14 2018-05-28 14:10:23
I had a further issue that foxed me for a while when theming existing code from a CMS.在对来自 CMS 的现有代码进行主题化时，我还有一个问题困扰了我一段时间。 I wanted to use flexbox with justify-content:space-between but the left and right elements weren't flush.我想将 flexbox 与justify-content:space-between一起使用，但左右元素不齐。
In that system the items were floated and the container had a :before and/or an :after to clear floats at beginning or end.在那个系统中，项目是浮动的，容器有一个:before和/或一个:after来清除开始或结束时的浮动。 So setting those sneaky :before and :after elements to display:none did the trick.因此，将那些鬼鬼祟祟的:before和:after元素设置为display:none就可以了。
解决方案4
9 2019-08-19 19:24:14
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显示。
解决方案5
3 2021-09-07 13:52:43
Sometimes justify-content just isn't the property you should use.有时justify-content并不是您应该使用的属性。 This is especially true when your flex-direction is column which makes the main axis vertical (y).当您的flex-direction是使主轴垂直（y）的column时尤其如此。 You should try the align-item property, that may be the charm.您应该尝试align-item属性，这可能是魅力所在。
解决方案6
0 2022-08-01 14:43:47
always make sure to specify a width and height for your container + setting padding: 0 (or auto);始终确保为您的容器指定width和height +设置padding: 0 (or auto); and margin: 0 (or auto);和margin: 0 (or auto); for the elements inside the container might help too对于容器内的元素也可能有帮助
解决方案7
-10 2019-07-08 11:05:15
Go to inspect element and check if .justify-content-center is listed as a class name under 'Styles' tab.转到检查元素并检查 .justify-content-center 是否在“样式”选项卡下列为类名。 If not, probably you are using bootstrap v3 in which justify-content-center is not defined.如果没有，可能您正在使用未定义 justify-content-center 的 bootstrap v3。
If so, please update bootstrap, worked for me.如果是这样，请更新引导程序，为我工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.