Html 如何右对齐弹性项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22429003/
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 Right-align flex item?
提问by Mark Boulder
Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?
是否有比使用更灵活的方式来右对齐“联系人” position: absolute？
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>采纳答案by Kevin Suttle
Here you go. Set justify-content: space-betweenon the flex container.
干得好。设置justify-content: space-between在 flex 容器上。
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>回答by adrift
A more flex approach would be to use an autoleft margin (flex items treat auto marginsa bit differently than when used in a block formatting context).
更灵活的方法是使用auto左边距（弹性项目处理自动边距与在块格式上下文中使用时有点不同）。
.c {
margin-left: auto;
}
Updated fiddle:
更新的小提琴：
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>回答by Nick F
If you want to use flexbox for this, you should be able to, by doing this (display: flexon the container, flex: 1on the items, and text-align: righton .c):
如果你想为此使用 flexbox，你应该能够通过这样做（display: flex在容器上，flex: 1在项目上，text-align: right在上.c）：
.main { display: flex; }
.a, .b, .c {
background: #efefef;
border: 1px solid #999;
flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }
...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-betweenon the container and remove the text-alignrules completely:
...或者（甚至更简单），如果项目不需要满足，您可以justify-content: space-between在容器上使用并text-align完全删除规则：
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
Here's a demoon Codepen to allow you to quickly try the above.
这是Codepen上的演示，可让您快速尝试上述操作。
回答by Arno
You can also use a filler to fill the remaining space.
您还可以使用填充物来填充剩余空间。
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
.filler{
flex-grow: 1;
}
I have updated the solution with 3 different versions. This because of the discussion of the validity of using an additional filler element. If you run the code snipped you see that all solutions do different things. For instance setting the filler class on item b will make this item fill the remaining space. This has the benefit that there is no 'dead' space that is not clickable.
我已经用 3 个不同的版本更新了解决方案。这是因为讨论了使用附加填充元素的有效性。如果您运行剪下的代码，您会看到所有解决方案都在做不同的事情。例如在项目 b 上设置填充类将使该项目填充剩余空间。这样做的好处是没有不可点击的“死”空间。
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>回答by Melchia
Or you could just use justify-content: flex-end
或者你可以使用 justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
回答by CESCO
As easy as
一样容易
.main {
display: flex;
flex-direction:row-reverse;
}
回答by andreisrob
Add the following CSS class to your stylesheet:
将以下 CSS 类添加到您的样式表：
.my-spacer {
flex: 1 1 auto;
}
Place an empty element between the element on the left and the element you wish to right-align:
在左边的元素和要右对齐的元素之间放置一个空元素：
<span class="my-spacer"></span>
<span class="my-spacer"></span>
回答by TetraDev
If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this:
如果您需要左对齐一个项目（如标题），然后右对齐多个项目（如 3 张图像），那么您可以执行以下操作：
h1 {
flex-basis: 100%; // forces this element to take up any remaining space
}
img {
margin: 0 5px; // small margin between images
height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}
Here's what that will look like (only relavent CSS was included in snippet above)
这就是它的样子（上面的代码片段中只包含了相关的 CSS）
回答by Mohammad Adeel
'justify-content: flex-end' worked within price box container.
'justify-content: flex-end' 在价格框容器内工作。
.price-box {
justify-content: flex-end;
}
回答by nights
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
我发现将 'justify-content: flex-end' 添加到 flex 容器可以解决问题，而 'justify-content: space-between' 没有任何作用。
