CSS 如何对齐单个 flexbox 项目（覆盖 justify-content）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23621650/
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
How to justify a single flexbox item (override justify-content)
提问by Mahks
You can override align-itemswith align-selffor a flex item.
I am looking for a way to override justify-contentfor a flex item.
您可以覆盖align-items有align-self一个弯曲的项目。我正在寻找一种覆盖justify-content弹性项目的方法。
If you had a flexbox container with justify-content:flex-end, but you want the first item to be justify-content: flex-start, how could that be done?
如果你有一个带有 的 flexbox 容器justify-content:flex-end，但你想要第一个项目是justify-content: flex-start，那怎么做？
This was best answered by this post: https://stackoverflow.com/a/33856609/269396
这个帖子最好回答：https: //stackoverflow.com/a/33856609/269396
回答by Pavlo
There doesn't seem to be justify-self, but you can achieve similar result setting appropriate marginto auto1. E. g. for flex-direction: row(default) you should set margin-right: autoto align the child to the left.
似乎没有justify-self，但是您可以实现适合margin于auto1 的类似结果设置。例如 对于flex-direction: row（默认），您应该设置margin-right: auto为将子项与左侧对齐。
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.block {
width: 50px;
background: tomato;
}
.justify-start {
margin-right: auto;
}<div class="container">
<div class="block justify-start"></div>
<div class="block"></div>
</div>1 This behaviour is defined by the Flexbox spec.
1 此行为由 Flexbox 规范定义。
回答by eeglbalazs
AFAIK there is no property for that in the specs, but here is a trick I've been using:
set the container element ( the one with display:flex) to justify-content:space-aroundThen add an extra element between the first and second item and set it to flex-grow:10(or some other value that works with your setup)
AFAIK 在规范中没有属性，但这是我一直在使用的一个技巧：将容器元素（带有display:flex）设置为justify-content:space-around然后在第一项和第二项之间添加一个额外的元素并将其设置为flex-grow:10（或某些适用于您的设置的其他值）
Edit: if the items are tightly aligned it's a good idea to add flex-shrink: 10;to the extra element as well, so the layout will be properly responsive on smaller devices.
编辑：如果项目紧密对齐，最好也添加flex-shrink: 10;额外元素，这样布局将在较小的设备上正确响应。
回答by borkxs
If you aren't actually restricted to keeping all of these elements as sibling nodes you can wrap the ones that go together in another default flex box, and have the container of both use space-between.
如果您实际上不受限制将所有这些元素作为兄弟节点保留，您可以将这些元素包装在另一个默认的 flex 框中，并让两者的容器使用 space-between。
.space-between {
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.default-flex {
border: 1px solid blue;
display: flex;
}
.child {
width: 100px;
height: 100px;
border: 1px solid;
}<div class="space-between">
<div class="child">1</div>
<div class="default-flex">
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>Or if you were doing the same thing with flex-start and flex-end reversed you just swap the order of the default-flex container and lone child.
或者，如果你用 flex-start 和 flex-end 反向做同样的事情，你只需交换 default-flex 容器和单子容器的顺序。
回答by Frank L?mmer
It seems like justify-selfis coming to browsers soon. There is already an article on it on MDN. At the time of this writing, browser support is poor.
似乎justify-self很快就会出现在浏览器中。MDN上已经有一篇关于它的文章。在撰写本文时，浏览器支持还很差。
Regarding margin-solution: I have a Flexbox grid with gaps. There is no flex-gapproperty (yet?) with Flexbox. So for the gutters, I am using paddings and margins, so margin: autoneeds to overwrite the other margins...
关于边距解决方案：我有一个带有间隙的 Flexbox 网格。flex-gapFlexbox没有属性（还没有？）。所以对于排水沟，我使用了填充和边距，所以margin: auto需要覆盖其他边距......
回答by Mahks
For those situations where width of the items you do want to flex-endis known, you can set their flex to "0 0 ##px" and set the item you want to flex-startwith flex:1
对于您做的项目宽度要将这些情况flex-end是已知的，你可以自己挠设置为“0 0 ## PX”，并设置你想要的项目flex-start与flex:1
This will cause the pseudo flex-startitem to fill the container, just format it to text-align:leftor whatever.
这将导致伪flex-start项目填充容器，只需将其格式化为text-align:left或其他。
回答by Micros
I solved a similar case by setting the inner item's style to margin: 0 auto.
Situation: My menu usually contains three buttons, in which case they need to be justify-content: space-between. But when there's only one button, it will now be center aligned instead of to the left.
我通过将内部项目的样式设置为margin: 0 auto.
情况：我的菜单通常包含三个按钮，在这种情况下，它们需要是justify-content: space-between。但是当只有一个按钮时，它现在将居中对齐而不是向左对齐。
