[解決済み] フレックスアイテムを右にフロートさせる
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>
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] 位置は絶対だが、親に対して相対的
-
[解決済み] なぜブラウザはCSSセレクタを右から左へマッチングさせるのですか?
-
[解決済み] 子要素の余白が親要素を移動させる
-
[解決済み] [Solved] divをコンテナの底にフロートさせるには?
-
[解決済み】CSSで子DIVの幅を親DIVより広くする方法はありますか?
-
[解決済み】フレックスアイテムの幅を親コンテナの幅ではなく、コンテンツの幅にする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】位置固定が機能しない
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] divが重ならないようにするには?
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] 画像をインラインで表示する方法
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?