フレックスアイテムを右に浮かせる

Question 1

私は

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

親は持っています

.parent {
    display: flex;
}

私の最初の子供のために、私は単にアイテムを右に浮かせたいです。

そして、私の他のdivは、親によって設定されたフレックスルールに従います。

これは可能ですか？

そうでない場合、float: rightアンダーフレックスを行うにはどうすればよいですか？

Question 2

フレックスコンテナfloat内では使用できません。その理由は、ここに表示されているように、floatプロパティがフレックスレベルのボックスに適用されないためです。Fiddle

したがって、child要素を要素の右側に配置するparent場合は使用できますmargin-left: autoが、ここに表示されているように、child要素は他の要素もdiv右側にプッシュしますFiddle。

今できることは、要素の順序を変更し、要素に設定order: 2してchild、2番目のdivに影響を与えないようにすることです。

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

<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

スニペットを展開

Question 3

フロートは必要ありません。実際、フレックスボックスではフロートが無視されるため、これらは役に立ちません。

また、CSSの配置も必要ありません。

利用可能ないくつかのフレックス方法があります。autoマージンは別の回答で言及されています。

他に2つのオプションがあります。

使用justify-content: space-betweenとorderプロパティ。
justify-content: space-betweendivの順序を使用して逆にします。

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

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

p { background-color: #ddd;}

<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>

スニペットを展開