CSS 为什么 flexbox space-between 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33010395/
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
Why is flexbox space-between not working?
提问by Al-76
I am trying to implement flexbox but can't get it to work. What am I missing? I have all the flexbox vendor prefixes in place.
我正在尝试实现 flexbox，但无法让它工作。我错过了什么？我已经准备好了所有的 flexbox 供应商前缀。
.main-navigation ul {
width:100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
}
.main-navigation ul li {
justify-content:space-between;
width:100px;
background:#666;
display:block;
}
The goal is to get the left most lito go flush with the left of the ul's container and the right most lito go flush with the right-hand side of the ul's container. Any help welcome.
目标是让最li左边与 ul 容器的左侧齐平，最右边与 ul 容器的右侧li齐平。欢迎任何帮助。
回答by Rakhat
The problem is you should set justify-content: space-between;on element with display: flexproperty or better say on 'parent', so 'child' elements will be aligned with space between each other.
问题是您应该justify-content: space-between;在具有display: flex属性的元素上设置或更好地在“父”上设置，因此“子”元素将与彼此之间的空间对齐。
.main-navigation ul {
width: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.main-navigation ul li {
width: 100px;
background: #666;
display: block;
}
回答by ccrez
One more thing to keep in mind, additional to the need of adding justify-content:space-betweento the flex container and not to the elements themselves; Make sure that you don't have empty elements (like an empty divor :after) inside the container.
还有一件事要记住，除了需要添加justify-content:space-between到 flex 容器而不是元素本身之外；确保容器内没有空元素（例如空的div或:after）。
In my case turned out a JS adding an empty div as a "clearfix" from the days before flex, when things were done floating elements.
在我的情况下，JS 在 flex 之前添加了一个空的 div 作为“clearfix”，当时事情已经完成了浮动元素。
justify-content:space-betweenwill justify for all the elements inside the container even those with no content, which can mess up the alignment and wrapping.
justify-content:space-between将证明容器内的所有元素甚至那些没有内容的元素都是合理的，这可能会弄乱对齐和包装。
回答by Michael Benjamin
Flex properties are divided among two categories: The flex containerand the flex items.
Flex 属性分为两类：弹性容器和弹性项目。
Some properties apply only to the container, other properties apply only to the items.
某些属性仅适用于容器，其他属性仅适用于项目。
The justify-contentproperty applies only to a flex container.
该justify-content属性仅适用于 flex 容器。
In your code, justify-contentis applied to the items, so it's having no effect.
在您的代码中，justify-content应用于项目，因此它不起作用。
Re-assign it to the container.
将其重新分配给容器。
Of course, an element can be both a flex container and item, in which case all properties apply. But that's not the case here. The lielements are solely flex items and will ignore container properties.
当然，一个元素既可以是 flex 容器，也可以是项目，在这种情况下，所有属性都适用。但这里的情况并非如此。这些li元素只是弹性项目，将忽略容器属性。
For a list of flex properties – divided by container and items – see: A Complete Guide to Flexbox
有关 flex 属性的列表 - 按容器和项目划分 - 请参阅：Flexbox 完整指南
