Question

如何在.right保持在中心的同时将.centred一直向右推？（它不需要使用flex，但我需要在移动视图上将.centred保持在.right之上

  <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。然后我们添加另一个项目以使用左侧站点上的其余空间，以便将其余内容推送到右侧。使用flex-basis配置宽度。

Answer 3

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

.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.centred {
}

.right {
      margin-left: auto;
}

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

3 个答案: