使Flex项目正确地浮动

关注

发信

关注(28)粉丝(399)

使Flex项目正确地浮动

本文介绍了使Flex项目正确地浮动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个

  
 
 所以如果你想在 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项目正确地浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 06:18