html - 无法使 div 正确 float (可能是因为 flexbox？)

Question

基本上，在页面中间有一个容器 div 和 2 个子 div。需要正确的一个放在容器的最右边。 float :正确不起作用。不能使用 margin-left，因为我希望它适用于任何分辨率。右:0 也不起作用。使用 flex 盒子。可能与它有关。

html代码

<div class="parent">
 <div class="child1">adsfasdfdsa</div>
 <div class="child2">192837192</div>
</div>

CSS代码

.parent {
  -o-display:flex;
  -webkit-display:flex;
  -ms-display:flex;
  -moz-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex; 
  width:80%;
  margin:0 auto;
}
.child2 {float:right;}

这是一个 fiddle http://jsfiddle.net/82yXE/

Answer 1

尝试将左边距设置为auto，它会强制浏览器将.child2移动到正确的位置:

.child2 {
  margin-left: auto;
}

检查这个工作示例:http://jsfiddle.net/e6eLf8yu/