フレックス プロパティを使用したフレックス フッター内のテキストの右揃え

float プロパティを使用してフレックス コンテナ内のテキストを右揃えにしようとした場合、問題が発生する可能性があります。これは、float プロパティがフレックス コンテナ内でサポートされていないためです。

フレックスボックスの仕様によれば、「float と clear は、フレックス項目のフローティングまたはクリアランスを作成せず、フロー外にも取りません。」 」代わりに、コンテンツに対して新しい「フレックス フォーマット コンテキスト」を確立します。これは、フロートが無視され、マージンがコンテナのコンテンツとともに折りたたまれないことを意味します。

フレックス表示に設定されたフッター内のテキストを右に配置するには、次のようにします。代わりにフレックスプロパティを使用してください。 justify-content プロパティを使用すると、コンテナ内で要素を水平方向に整列させることができます。たとえば、提供されたコード スニペットでは:

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

このコードは、フッター要素内の「foo link」テキストを含むスパンを右揃えにします。