html - Flex 以第一个 child 为中心，第二个 child 在最后

Question

怎么推 .right一直向右，同时保持 .centred在中心？ (它不需要使用 flex，但我需要在移动 View 上保持 .centred 高于 .right)

https://codepen.io/anon/pen/rjZLOv

  <div class="flex">
      <div class="centred">
          <div class="a">asdfasdf</div>
          <div class="b">asdfasdf</div>
      </div>
      <div class="right">asdfasfad</div>
  </div>


.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centred {
    justify-content: center;
}

.right {
  justify-content: flex-end;
}

Answer 1

您可以制作.centred inline-block并使用 text-align: center;在父节点上使其居中，然后 float .right向右。

.container  {
  width: 1024px;
  margin: auto;
  text-align: center;
}

.centred {
  display: inline-block;
}

.right {
  float: right;
}

<div class="container">
    <div class="centred">
      <div class="a">asdfasdf</div>
      <div class="b">asdfasdf</div>
    </div>
    <div class="right">asdfasfad</div>
</div>