Question

是否有一种更灵活的方式来正确对齐“联系”而不是使用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/

Answer 1

更灵活的方法是使用auto左边距（flex项目处理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>

Answer 2

你走了。在Flex容器上设置justify-content: space-between。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果你想为此使用flexbox，你应该能够这样做（容器上的display: flex，项目上的flex: 1和{{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

这是Codepen上的demo，可让您快速尝试上述内容。

Answer 4

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

<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上设置填充类将使此项目填充剩余空间。这样做的好处是没有“死亡”。不可点击的空间。

＆＃13;

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

＆＃13;

Answer 5

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

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

Answer 6

一样简单

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

Answer 7

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

这就是它的样子（只有相关的CSS包含在上面的代码段中）

Answer 8

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

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

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

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

Answer 9

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

Answer 10

'justify-content：flex-end'在价格盒容器中工作。

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

Answer 11

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

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

请参阅fxLayoutAlign文档here和完整的fxLayout文档here。

Answer 12

基于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>

如何右键对齐flex项？

12 个答案: