1. ホーム
  2. html

[解決済み] フレックスアイテムを右にフロートさせる

2022-02-02 12:47:41

質問

を持っています。

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

親には

.parent {
    display: flex;
}

最初の子には、単純にアイテムを右にフロートさせたいと思います。

そして、他のdivは親が設定したフレックスルールに従うようにします。

このようなことは可能なのでしょうか?

そうでない場合、どうすれば float: right をFlexの下で使用できますか?

解決方法は?

を使用することはできません。 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>