使弹性项目向右浮动 [英] Making a flex item float right

问题描述

我有一个

<div class="child" style="float:right">无视家长?
<div>另一个孩子

父母有

.parent {显示:弹性；}

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

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

这有可能吗?

如果没有，我如何在 flex 下做一个 float: right ?

解决方案

flex container 内不能使用 float 原因是 float 属性不适用于弹性级别的框，正如您在此处看到的Fiddle.

因此，如果您想将 child 元素定位在 parent 元素的右侧，您可以使用 margin-left: auto 但现在使用 child 元素也会将其他 div 推到右边，正如你在这里看到的 小提琴.

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

.parent {显示:弹性；}.孩子 {左边距:自动；订单:2；}

<div class="child">忽略父级?</div><div>另一个孩子</div>

I have a

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

The parent has

.parent {
    display: flex;
}

For my first child, I want to simply float the item to the right.

And my other divs to follow the flex rule set by the parent.

Is this something possible?

If not, how do I do a float: right under flex?

解决方案

You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here 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 to the right as you can see here Fiddle.

What you can do now is change order of elements and set order: 2 on child element so it doesn't affect second div

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

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

这篇关于使弹性项目向右浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！