如何右对齐弹性项目？答案

【问题标题】：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
这里至少有两种方法：stackoverflow.com/a/33856609/3597276
注意：第二个答案比第一个答案有更多的赞成票。

标签： html css flexbox

【解决方案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; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

【讨论】：

终于有人懂flexbox了
@Kokodoko 是的，使用一个非语义的 html 元素来移动另一个元素是理解 flexbox 的首要任务......
@Zanshin13 其他答案都写了这么多额外的 css，你不妨省略 flex 容器并自己编写整个东西:)
@Kokodoko justify-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>

【讨论】：