如何右键对齐flex项？

Question

是否有更多的flexbox-ish方式来正确对齐"联系"而不是使用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左边距(弹性项处理自动边距与在块格式化上下文中使用时略有不同).

.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

干得好.设置justify-content: space-between在flex容器上.

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

Answer 3

如果你想使用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上的一个演示,允许您快速尝试上述内容.

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

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

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

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

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

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

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

Answer 8

margin-left: auto 效果很好。但是干净的 flex box 解决方案在主类中是空的。如果有两个或更多元素，则间距效果很好。我也为单个元素添加了一个解决方案。

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

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

这就是它的样子(上面的代码段只包含了相关的CSS)

Answer 10

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

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

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

Answer 11

“价格合理的内容：弹性端”在价格盒容器中工作。

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