如何右对齐弹性项目？

678

是否有比使用方法更灵活的“联系人”右对齐方式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/

html  css  flexbox 
— 马克·博尔德
source
2
您可以正确使用float，但这是相同的方式！最好的方法是使用文本对齐的显示表。
— Yohann Tilotti 2014年
当然可以，如果更好。仍然无法正确对齐“联系人”：jsfiddle.net/vqDK9/1
— Mark Boulder
2
我更新了您的小提琴jsfiddle.net/vqDK9/2
— Yohann Tilotti 2014年
至少有两种方法可以执行此操作：stackoverflow.com/a/33856609/3597276
— Michael Benjamin

Answers:

452

干得好。设置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>
展开摘要

— 凯文·索特尔
source
290
或justify-content: flex-end
— 英国电信
1
尝试将.c的宽度设置为300px。标题不再居中。所以，是的，这回答了问题，但这破坏了设计。
— Agamemnus
22
请注意，这并不总是像您期望的那样工作，例如存在.c::after伪元素时。以我的经验，margin-left: auto;就是要走的路。
— 威尔
13
或flex-flow: row-reverse;
— jchook
8
如果您不希望在flex容器中仅对齐一项，我看不出这是正确的答案。
— Foxhoundn
1095

一种更灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。

.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>
展开摘要

— 漂流
source
2
谢谢。您个人喜欢上面的Yohann Tilotti的display table方法吗？如果是这样，为什么？
— Mark Boulder 2014年
4
@MarkBoulder：出于兼容性的原因，他的方法更好，但是如果您已经在使用flexbox，我的回答将更有意义。
— 2014年
4
@MarkBoulder：在这种情况下，他们俩都完成了同样的事情。优势将具有柔性的项目相关的其他属性（和行为），该表的做法没有（flex，order，等）。
— 2014年
3
如果您不能包装元素并且需要浮动说出最后三个，则仅使用此margin-left: auto;样式将最后一个指向第三个。
— Daniel Sokolowski
2
@Justin弄清楚了，不需要把它们包起来-就我而言，我不能。解决的办法是只针对三个项目中的第一个margin-left: auto;。
— Daniel Sokolowski
40

如果要为此使用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 上的演示，可让您快速尝试上述操作。

— 尼克·F
source
2
space-between正是我要找的东西，谢谢！
— 艾迪·弗莱彻
使用第二个建议时，边框消失了，预期的行为？ codepen.io/oshihirii/pen/RygKRd
— user1063287 '18
38

您也可以使用填充物填充剩余空间。

<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>
展开摘要

— 亚诺
source
3
终于有人了解flexbox
— Kokodoko
9
@Kokodoko是的，使用另一个非语义html元素来移动另一个元素是了解flexbox的最重要...
— Zanshin13
@ Zanshin13其他答案都写了太多额外的CSS，因此您不妨省去flex容器并自己编写整个代码：)
— Kokodoko
2
@Kokodoko justify-content: space-between是“那么多”的CSS，是吗？无需进一步评论（但如果您愿意-欢迎聊天）。这个答案有权在这里，因为这是一个解决方案。但绝对不是最佳选择。Idk，也许您没有注意到，但是其他答案中的大多数CSS都是OP，而答案实际上减少了（一点）作者的CSS数量。这个答案没有其他的CSS少（没有OP的CSS-jsfiddle.net/63ma3b56不会起作用）。但是它还有一个html元素。
— Zanshin13
19

一样容易

.main {
    display: flex;
    flex-direction:row-reverse;
}
— CESCO
source
12

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

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

在左侧的元素和想要右对齐的元素之间放置一个空元素：

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

— 安德烈斯罗布
source
对于那些不只是想右对齐单个元素，而是想左对齐一个元素，而右对齐另一个元素（在相同的flex布局中）的人来说，这就是方法！
— Sensei James
8

如果您需要将一项左对齐（例如标题），然后将多项右对齐（例如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
}

这是看起来的样子（上面的片段中仅包含了relavent CSS）

在此处输入图片说明

— TetraDev
source
4

我发现在flex容器中添加“ justify-content：flex-end”可以解决问题，而“ justify-content：space-between”则无济于事。

— 晚上
source
2

对于使用Angular和Flex-Layout的用户，请在flex-item容器上使用以下内容：

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

见fxLayoutAlign文档这里和全fxLayout文档在这里。

— 林道森
source
0

基于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>
展开摘要

— 1.21吉瓦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.