display:flex时某一div居右怎么实现？

Question

外层的view用了display:flex,这时想叫“运河上院“也就是最后的div居右边对齐，这个要怎么实现？

Answer 1

<style>
.flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
.flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
.flex-row.flex-spacing > .flex-main:not(:last-child), .flex-row.flex-spacing > .flex-side:not(:last-child) {margin-right:0.5em;}
.flex-row > .flex-main.flex-scroll {overflow-x:auto;}
.flex-row.flex-margin {margin-left:0.5em;margin-right:0.5em;}
.flex-row.flex-padding {padding-left:0.5em;padding-right:0.5em;}
.flex-row.flex-wrap {flex-wrap:wrap;}
.flex-row.flex-center {justify-content:center;}
</style>

<div class="flex-row">
    <div class="flex-side">Left</div>
    <div class="flex-main"></div>
    <div class="flex-side">Rigt</div>
</div>

Answer 2

给这个子元素加上 margin-left: auto;

Answer 3

一般来说是给需要居右的元素添加 margin-left:auto 的属性。如果后续还有其他元素的话，需要给这个具有的元素添加 order 属性把他置为最末尾。

不过也可以通过调整布局结构使用两块div来包裹，然后给父级配置 justify-content:space-between 来做两端对齐，这样其实更好一些。
例如：

<div class="container">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>
<style>
.container{
  display:flex;
  justify-content:space-between;
}
</style>