Float が Flexbox で機能しないのはなぜですか? より良い代替手段は何ですか?

フレックスボックスとフロート: 不安定な組み合わせ

フレックス コンテナ内のフッター要素の右側にテキストを配置しようとすると、 float プロパティは自然な選択のように思えるかもしれません。ただし、この手法では予期せぬ障害が発生します。

表示プロパティが flex に設定されている場合、コンテナ内の子要素の float プロパティは無効になります。この動作は、フレックスボックスの基本原則に由来しています。

フレックスボックスとフロート: 原則の衝突

フロート プロパティは、主に従来のブロック レイアウトで使用されます。後続のコンテンツを脇に置く要素。ただし、フレックス コンテナでは、レイアウト アルゴリズムがこれらのルールに優先します。

フレックスボックスの仕様に記載されているように:

フロートはフレックス コンテナに侵入せず、フレックス コンテナのマージンは折りたたまれません。

より適切な解決策: Flexプロパティ

float プロパティに依存する代わりに、flexbox はより適切なソリューション、justify-content プロパティを提供します。 justify-content を flex-end に設定すると、フレックス コンテナ内の要素が右端に揃えられます。

コード スニペット:

footer {
  display: flex;
  justify-content: flex-end;
}

footer span {
  text-align: right;
}

<footer>
  <span>
    <a>foo link</a>
  </span>
</footer>

この改訂されたアプローチにより、「foo リンク」が適切に配置されます。フレックスレイアウトを維持しながら、フッター要素の右側。

以上がFloat が Flexbox で機能しないのはなぜですか? より良い代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。