使弹性项目正确浮动

114

我有一个

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

父母有

.parent {
    display: flex;
}

对于我的第一个孩子，我想简单地将项目浮动到右侧。

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

这有可能吗？

如果没有，我该如何做float: rightunder flex？

html css flexbox

— 刘震
source

Answers:

213

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

因此，如果您想将childelement定位在element的右边，则parent可以使用，margin-left: auto但是现在childelement也将其他元素推div到右边，如您在此处看到的Fiddle。

您现在可以做的是更改元素的顺序并order: 2在child元素上进行设置，这样就不会影响第二个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）
source

谢谢，我可以看看第一个解决方案。我不想使用display：absolute，因为我的其他孩子不应被第一个孩子覆盖。

— 刘震

“浮动不侵入flex容器”。没错，但这不是原因。原因是该float属性不适用于伸缩级框。

— Oriol

这行得通，谢谢！为什么justify-self: end;（或类似的东西）对孩子不起作用？这似乎对flexbox问题不是那么灵活的解决方案。

— Brady Dowling

@BradyDowling我知道这是一个较晚的答复，但是证明自己结束需要将显示设置为网格。Flexbox将忽略justify-self：end。看到这里： developer.mozilla.org/en-US/docs/Web/CSS/justify-self

— Paul

<DIV>另一个孩子</ DIV> <DIV CLASS = “孩子”>忽略父</ DIV> U可以互换两个股利和无秩序2它的工作原理呢？

— yeeen

您不需要花车。实际上，它们没有用，因为在flexbox中忽略了浮点数。

您也不需要CSS定位。

有几种可用的flex方法。另一个答案提到了auto利润率。

这是另外两个选项：

使用justify-content: space-between和order财产。
使用justify-content: space-between并反转div的顺序。

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}

<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

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

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

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

展开摘要

— 迈克尔·本杰明
source