web-dev-qa-db-ja.com

フロートはフレックスコンテナでは機能しません

フッター要素の右側にテキスト（fooリンク）を配置します。

flexのままにするにはフッター表示が必要です。

しかし、flexに設定すると、spanのfloat:rightは機能しなくなります。

<footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

https://jsfiddle.net/dhsgvxdx/

htmlcsshtml5css3flexbox
37
mlibre

floatプロパティは、フレックスコンテナでは無視されます。

flexbox仕様から：

3。Flexコンテナ：flexおよびinline-flex表示値

Flexコンテナは、そのコンテンツに対して新しいflexフォーマットコンテキストを確立します。これは、ブロックレイアウトの代わりにフレックスレイアウトが使用されることを除いて、ブロックフォーマッティングコンテキストの確立と同じです。

たとえば、フロートはフレックスコンテナーに侵入せず、フレックスコンテナーのマージンはコンテンツのマージンと一緒に崩壊しません。

floatおよびclearは、フレックスアイテムのフローティングまたはクリアランスを作成せず、アウトオブフローにしません。

代わりに、単にフレックスプロパティを使用します。

footer {
    display: flex;
    justify-content: flex-end;
}
<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

フッターにさらにアイテムがあり、他の配置オプションが必要な場合、2つのガイドがあります。

38
Michael_B

ここでjsfiddleで行ったようにmargin-left: auto;を追加すると動作します。 https://jsfiddle.net/dhsgvxdx/3/

<body>
    <footer style="display: flex;">
        <span style="text-align: right;float: right; margin-left: auto;">
            <a>foo link</a>
        </span>
    </footer>
</body>
32
D.Soderberg

このフッターに右揃えのアイテムのみを含める場合は、justify-content: flex-endをflexコンテナに単純に適用できます。この方法では、子にスタイルを追加する必要はありません。

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

Codepenの例

3
alanbuchanan