Making a flex item float right

Question

I have a   lt div class  parent  gt       lt div class  child  style  float right  gt  Ignore parent   lt  div gt       lt div gt  another child  lt  div gt   lt  div gt    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

User · Answer

You don t need floats  In fact  they re useless because floats are ignored in flexbox   You also don t need CSS positioning   There are several flex methods available  auto margins have been mentioned in another answer   Here are two other options    Use justify-content  space-between and the order property  Use justify-content  space-between and reverse the order of the divs     x000D   x000D   parent   x000D      display  flex  x000D      justify-content  space-between  x000D    x000D   x000D   parent first-of-type  gt  div last-child   order  -1    x000D   x000D  p   background-color   ddd   x000D   lt p gt Method 1  Use  lt code gt justify-content  space-between lt  code gt  and  lt code gt order-1 lt  code gt  lt  p gt  x000D   x000D   lt div class  parent  gt  x000D       lt div class  child  style  float right  gt  Ignore parent   lt  div gt  x000D       lt div gt another child  lt  div gt  x000D   lt  div gt  x000D   x000D   lt hr gt  x000D   x000D   lt p gt Method 2  Use  lt code gt justify-content  space-between lt  code gt  and reverse the order of  x000D               divs in the mark-up lt  p gt  x000D   x000D   lt div class  parent  gt  x000D       lt div gt another child  lt  div gt  x000D       lt div class  child  style  float right  gt  Ignore parent   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D   parent   x000D    display  flex  x000D    x000D   child   x000D    margin-left  auto  x000D    order  2  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt Ignore parent  lt  div gt  x000D     lt div gt another child lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Making a flex item float right

The answer is

Examples related to html

Examples related to css

Examples related to flexbox

Tags