如何右对齐flex项目？

有没有比使用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>

http://jsfiddle.net/vqDK9/

1120410 次浏览
小开
最佳答案

一种更灵活的方法是使用auto左边距（flex项目对待汽车利润的方式与在块格式上下文中使用时略有不同）。

.c {margin-left: auto;}

更新小提琴：

.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>

小开

如果您想使用flexbox，您应该能够通过这样做（容器上的display: flex，项目上的flex: 1，.c上的text-align: right）：

.main { display: flex; }.a, .b, .c {background: #efefef;border: 1px solid #999;flex: 1;}.b { text-align: center; }.c { text-align: right; }

…或者（更简单），如果项目不需要满足，您可以在容器上使用justify-content: space-between并完全删除text-align规则：

.main { display: flex; justify-content: space-between; }.a, .b, .c { background: #efefef; border: 1px solid #999; }

这里有一个关于CoDepen的demo，可以让你快速尝试上面的操作。

小开

给你。在flex容器上设置justify-content: space-between。 

.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>

小开

您也可以使用填充器来填充剩余的空间。

<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;}

我已经用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>

小开

如果你需要一个项目左对齐（如标题），然后多个项目右对齐（如3个图像），那么你会这样做：

h1 {flex-basis: 100%; // forces this element to take up any remaining space}
img {margin: 0 5px; // small margin between imagesheight: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size}

这是它的样子（上面的代码片段中只包含了relavent CSS）

在此处输入图片描述

小开

像

.main {display: flex;flex-direction:row-reverse;}
小开

或者你可以使用justify-content: flex-end

.main { display: flex; }.c { justify-content: flex-end; }
小开

将以下CSS类添加到样式表中：

.my-spacer {flex: 1 1 auto;}

在左侧的元素和您希望右对齐的元素之间放置一个空元素：

<span class="my-spacer"></span>

小开

我发现，在flex容器中添加'valid-content： flex-end'可以解决问题，而'valid-content： space-的'没有任何作用。

小开

“证明内容：flex-end”在价格箱容器中工作。

.price-box {justify-content: flex-end;}
小开

对于那些使用Angular和Flex-Layout的人，在flex-Item容器上使用以下内容：

<div fxLayout="row" fxLayoutAlign="flex-end">

请参阅fxLayoutAligh文档这里和完整的fxLayout文档这里。

小开

基于TetraDev的回答的示例代码

右图：

* {outline: .4px dashed red;}
.main {display: flex;flex-direction: row;align-items: center;}
h1 {flex-basis: 100%;}
img {margin: 0 5px;height: 30px;}
<div class="main"><h1>Secure Payment</h1><img src="https://i.stack.imgur.com/i65gn.png"><img src="https://i.stack.imgur.com/i65gn.png"></div>

左边的图片： 

* {outline: .4px dashed red;}
.main {display: flex;flex-direction: row;align-items: center;}
h1 {flex-basis: 100%;text-align: right;}
img {margin: 0 5px;height: 30px;}
<div class="main"><img src="https://i.stack.imgur.com/i65gn.png"><img src="https://i.stack.imgur.com/i65gn.png"><h1>Secure Payment</h1></div>

小开

利润率左：自动运行良好。但是干净的弹性框解决方案在主类中应该是空格。如果有两个或更多元素，空格也很好。我也为单个元素添加了一个解决方案。

.main { display: flex; justify-content: space-between; }.a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;}.b { flex: 1; text-align: center; }
.c-wrapper {display: flex;flex: 1;justify-content: flex-end;}
.c-wrapper2 {display: flex;flex: 1;flex-flow: row-reverse;}
<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>
<div class="main"><div class="a"><a href="#">Home</a></div><div class="c"><a href="#">Contact</a></div></div>
<div class="main"><div class="c-wrapper"><a class="c" href="#">Contact</a><a class="c" href="#">Contact2</a></div></div><div class="main"><div class="c-wrapper2"><span class="c">Contact</span><span class="c">Contact2</span></div></div>


提交答案