Html 如何使用 Flexbox 居中对齐一个 flex 项目并右对齐另一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33444666/
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 center-align one flex item and right-align another using Flexbox
提问by resander
I am totally new to Flexbox and wanted to align buttons, but I could not see how to handle the common case with a center-aligned button and a right-aligned button on the same row using only Flexbox.
我是 Flexbox 的新手，想要对齐按钮，但我不知道如何仅使用 Flexbox 在同一行上处理居中对齐按钮和右对齐按钮的常见情况。
However, I found a way that used an invisible left-aligned item of the same length as the right-aligned item and the flex justify-contentwith space-betweento make the middle item centered on the row.
然而，我发现了一种方法，所用的相同的长度右对齐项目的无形左对齐项目和柔性justify-content带space-between，使集中在该行的中间项。
Is there a more direct way with Flexbox?
Flexbox 有没有更直接的方法？
.flexcontainer {
display: flex;
justify-content: space-between;
width: 500px;
height: 200px;
}
.iteminvisible {
flex: 0 1 auto;
width: 100px;
height: 100px;
visibility: hidden;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
}<div class="flexcontainer">
<div class="iteminvisible">Other</div>
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>回答by Michael Benjamin
Using justify-content: space-betweenwith an invisible flex item, as described in your question, is a good way to achieve the layout you want. Just note that the middle item can only be centered if both left and right items are equal length (see demo).
justify-content: space-between如您的问题所述，与不可见的 flex 项一起使用是实现所需布局的好方法。请注意，如果左右项目的长度相等，则中间项目只能居中（参见演示）。
Another solution you may want to consider involves automarginsand absolute positioning. Two benefits of this method are no need for extra mark-up and true centering can be achieved regardless item sizes. One drawback is that the centered item is removed from the document flow(which may or may not matter to you).
您可能要考虑的另一个解决方案涉及auto边距和绝对定位。这种方法的两个好处是不需要额外的标记，并且无论项目大小都可以实现真正的居中。一个缺点是居中的项目会从文档流中删除（这对您来说可能重要也可能无关紧要）。
.flexcontainer {
display: flex;
justify-content: flex-start; /* adjustment */
position: relative; /* new */
width: 500px;
height: 200px;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
position: absolute; /* new */
left: 50%;
transform: translateX(-50%);
}
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
margin-left: auto; /* new */
}<div class="flexcontainer">
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>More details here: Methods for Aligning Flex Items along the Main Axis(see boxes #62-78).
此处有更多详细信息：沿主轴对齐 Flex 项目的方法（参见框 #62-78）。
回答by Dots Me
.container {
display: flex;
flex-direction: column; //this will allow flex-end to move item to the right
align-items: center;
}
.right-item {
align-self: flex-end;
}
