使Flex项目正确地浮动 [英] Making a flex item float right

问题描述

我有一个

 < div class =parent> 
< div class =childstyle =float：right>忽略父项？ < / DIV> 
< div>另一个孩子< / div> 
< / div> 
  

父母有

  .parent {
 display：flex; 
 
 
 
 $ b $ p 
 $ b 
对于我的第一个孩子，我只想将项目浮动到右侧。 
 
 
 
我的其他div遵循父级设置的flex规则。 
 
 
 
这是可能的吗？ 
 
 
如果不是，我该如何做一个 float ：右在flex下？
解决方案 
 / strong> Flex容器中的/ code>，原因是浮动属性不适用于弹性框，如  Fiddle  。  
 
 
所以如果你想在 parent 右边定位 child  $ c $元素可以使用 margin-left：auto 但是现在 child 元素也会将其他的 div 如右图所示 小提琴 。  
 
 
你现在可以做的是改变元素的顺序，在上设置 order：2 子元素元素，所以它不影响第二个div  
 
 
 
 
 
  .parent {display：flex;}。 -left：auto; order：2;}  

 < div class =parent > < div class =child>忽略父级？< / div> < 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>

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