以第一个孩子为中心，最后以第二个孩子为中心

Question

如何在保持.centred居中的同时将.right一直推到右边？(它不需要使用 flex，但我需要在移动视图上保持.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;将其居中，然后将.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>

Answer 2

你可以

这样做： https://codepen.io/anon/pen/dNqXjo

代码：

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex > * {
    flex: 1;
}
.flex::before {
    content: "";
    flex: 1;
    background: red;
}

这使得弹性容器 (.flex( 中的项使用 flex。然后我们添加另一个项目以用完左侧站点上的其余空间，以便将其余内容推送到右侧。使用 flex-basis 配置宽度。

Answer 3

你几乎拥有它，你只需要margin-left和方向基础：

.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.centred {
}
.right {
      margin-left: auto;
}