使一个弯曲的项目浮动正确-Makingaflexitemfloatright

47  

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.

您不能在flex容器中使用float属性，原因是float属性不适用于浮动级别的盒子。

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.

如果你想要将子元素定位到父元素右侧你可以使用margin-left: auto但现在子元素也会将其他div推到右边，正如你在这里看到的。

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

现在可以做的是更改元素的顺序并设置子元素的顺序:2，这样就不会影响第二个div了

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

  
Ignore parent?
  
another child

10  

You don't need floats. In fact, they're useless because floats are ignored in flexbox.

你不需要。事实上，它们是无用的，因为浮动在flexbox中被忽略了。

You also don't need CSS positioning.

你也不需要CSS定位。

There are several flex methods available. auto margins have been mentioned in another answer.

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

Here are two other options:

以下是另外两个选择:

• Use justify-content: space-between and the order property.
• 使用rightfy -content:空格-between和order属性。
• Use justify-content: space-between and reverse the order of the divs.
• 使用“正当内容”:空格之间和颠倒div的顺序。

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

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

p { background-color: #ddd;}

Method 1: Use justify-content: space-between and order-1


    
 Ignore parent? 
    
another child 




Method 2: Use justify-content: space-between and reverse the order of 
             divs in the mark-up


    
another child 
    
 Ignore parent? 

0  

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

  
Ignore parent?
  
another child

can we do without using margin-left

我们可以不使用margin-left吗?