使弹性项目向右浮动

Question

我有一个

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

父母有

.parent {
    display: flex;
}

对于我的第一个孩子，我只想将项目向右浮动。

我的其他 div 遵循父级设置的 flex 规则。

这有可能吗？

如果没有，我该怎么做 float: right 在 flex 下？

原文由 Zhen Liu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在 flex 容器中 使用 float ，原因是 float 属性不适用于 flex-level 框，如您在此处看到的 Fiddle 。

So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div 你可以在这里看到的右边 Fiddle 。

您现在可以做的是更改元素的顺序并在 child 元素上设置 order: 2 --- 这样它不会影响第二个 div

 .parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}

 <div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议