如何右对齐弹性项目？
Posted
技术标签:
【中文标题】如何右对齐弹性项目？【英文标题】：How to Right-align flex item? 【发布时间】：2014-04-21 03:52:03 【问题描述】：有没有比使用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/
【问题讨论】：
你可以正确使用float，但方法是一样的......！最好的方法是使用带有 text-align 的显示表格。 当然，如果这样更好的话。但仍然无法右对齐“联系人”：jsfiddle.net/vqDK9/1 我更新了你的小提琴jsfiddle.net/vqDK9/2 这里至少有两种方法：***.com/a/33856609/3597276 注意：第二个答案比第一个答案有更多的赞成票。 【参考方案1】：更灵活的方法是使用auto 左边距（弹性项目对待auto margins 与在块格式化上下文中使用时略有不同）。
.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>【讨论】：
谢谢。你个人更喜欢上面的 Yohann Tilotti 的显示表方法吗？如果是，为什么？ @MarkBoulder：出于兼容性原因，他的方法更好，但如果您已经在使用 flexbox，我的回答会更有意义。 @MarkBoulder：在这种情况下，它们都完成了同样的事情。优点是拥有与弹性项目相关的其他属性（和行为），而表格方法没有（flex、order 等）。
这应该是公认的答案。因为justify-content: space-between; 仅在您的弹性容器中只有 2 个项目时才能完成您想要的操作（第一个项目在左侧，第二个项目在右侧）。但是超过 2 个项目，只对齐一些在右边，这是正确的做法！
如果你不能包裹元素并且你需要浮动说最后三个正确的，只使用这个margin-left: auto;样式来定位倒数第三个。【参考方案2】：
给你。在弹性容器上设置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>【讨论】：
或justify-content: flex-end
尝试将.c的宽度设置为300px。标题不再居中。所以是的，这回答了问题，但这破坏了设计。
请注意，这并不总是按您预期的方式工作，例如当有一个 .c::after 伪元素时。以我的经验，margin-left: auto; 是要走的路。
或flex-flow: row-reverse;
如果您不想仅对齐 flex 容器中的一项，我认为这不是一个正确的答案。【参考方案3】：
您也可以使用填充物来填充剩余空间。
<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;
.mainfillerdisplay: flex;
.fillerflex-grow:1; text-align:center
.a, .b, .c background: yellow; border: 1px solid #999;
</style>【讨论】：
终于有人懂flexbox了 @Kokodoko 是的，使用一个非语义的 html 元素来移动另一个元素是理解 flexbox 的首要任务...... @Zanshin13 其他答案都写了这么多额外的 css，你不妨省略 flex 容器并自己编写整个东西:) @Kokodokojustify-content: space-between 是“这么多”css，真的吗？无需进一步的 cmets（但如果您愿意 - 欢迎聊天）。这个答案有它的权利，因为它是一个解决方案。但绝对不是最佳的。 Idk，也许您没有注意到，但是来自另一个答案的大多数 css 都是 OP，并且答案实际上减少了（一点点）作者的 css 数量。这个答案没有比其他答案少的 css（如果没有 OP 的 css - jsfiddle.net/63ma3b56 将无法工作）。但它还有一个 html 元素。【参考方案4】：
如果你想为此使用 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;
...或者（甚至更简单），如果项目不需要满足，您可以在容器上使用justify-content: space-between并完全删除text-align规则：
.main display: flex; justify-content: space-between;
.a, .b, .c background: #efefef; border: 1px solid #999;
这是 Codepen 上的demo，可让您快速尝试上述方法。
【讨论】：
space-between 正是我想要的，谢谢！
使用第二个建议时边框消失，预期的行为？ codepen.io/oshihirii/pen/RygKRd
在我的配置中容器上的justify-content: space-between 没有向右移动项目，但text-align: right 做到了，谢谢。【参考方案5】：
或者你可以使用justify-content: flex-end
.main display: flex;
.c justify-content: flex-end;
【讨论】：
justify-content 属性是 flex-container 的一个属性，参见 Chris Coyer 的 flexy 备忘单：css-tricks.com/snippets/css/a-guide-to-flexbox
这是此页面上唯一对我有用的解决方案。【参考方案6】：
很简单
.main
display: flex;
flex-direction:row-reverse;
【讨论】：
【参考方案7】：将以下 CSS 类添加到您的样式表中：
.my-spacer
flex: 1 1 auto;
在左边的元素和要右对齐的元素之间放置一个空元素：
<span class="my-spacer"></span>
【讨论】：
对于那些不仅仅想右对齐单个元素，但可能想左对齐一个元素，右对齐另一个元素（在同一个 flex 布局中）的人来说，这是要走的路！ 【参考方案8】：margin-left：自动运行良好。但是干净的弹性盒解决方案将在主类中使用空格。如果有两个或更多元素，则间距效果很好。我也添加了单个元素的解决方案。
.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>【讨论】：
【参考方案9】：如果您需要一个项目左对齐（如标题），但多个项目右对齐（如 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
这就是它的样子（上面的 sn-p 中只包含相关的 CSS）
【讨论】：
【参考方案10】：'justify-content: flex-end' 在价格框容器中工作。
.price-box
justify-content: flex-end;
【讨论】：
【参考方案11】：我发现将“justify-content: flex-end”添加到 flex 容器可以解决问题，而“justify-content: space-between”则没有任何作用。
【讨论】：
【参考方案12】：对于那些使用 Angular 和 Flex-Layout 的人，请在 flex-item 容器上使用以下内容：
<div fxLayout="row" fxLayoutAlign="flex-end">
请参阅 fxLayoutAlign 文档 here 和完整的 fxLayout 文档 here。
【讨论】：
【参考方案13】：基于 TetraDev 的answer 的示例代码
右图：
*
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>【讨论】：
以上是关于如何右对齐弹性项目？的主要内容，如果未能解决你的问题，请参考以下文章