flex元素居右

记录在flex布局中某些元素需要居右的处理方式

<div class="box">
    <div class="left">
        左边内容
    </div>
    <div class="right">
        右边内容
    </div>
</div>

{
.box {
  width: 300px;
  height: 200px;
  display: flex;
  background: #eeeeee;
}
.left {
  background: #3A71A8;
}
.right {
  background: #30B08F;
  margin-left: auto; //需要居右的元素
}

左边内容

右边内容