レイアウトスペース均等の互換性の問題

モバイルレイアウトに詳しいプログラマは、フレックスボックスレイアウトとグリッドレイアウトの両方に justify-content 属性があり、space-evenly がその値の 1 つであることを知っています。その目的は次のような効果を達成することです。

効果は何ですか? ? ?

サブ要素はコンテナ空間を均等に共有します。これは、space-between や space-around では直接達成できない効果です。

実にパワフルです！！！しかし、Web サイトで使用できるかどうかを確認したところ、スペース均等の互換性があまりよくないことがわかりました。たとえば、ios safari は 10.3 より前ではまったくサポートされておらず、10.3 以降、グリッドレイアウトはサポートされていますが、フレックスボックスレイアウトはサポートされていません。それ。

したがって、スペースを均等に使用する場合は細心の注意を払う必要があり、ブラウザがそれをサポートしていることを確認する必要があります。そうしないと、希望する効果を得ることができません。

他の方法を使用して均等な空間の効果を達成することはできますか?

答えは「はい」です。space-between を使用して実装をシミュレートできます。can i use のクエリでは、次の図に示すように、space-between の互換性がはるかに優れていることがわかりました。

上記の均等なスペースと比較して、ブラウザのサポートがはるかに優れているかどうかを確認できます。

しかし、経験豊富なプログラマは、次の図に示すように、space-between によって子要素の先頭と末尾に空白スペースが残らないことを知っています。

では、最初と最後に同じサイズの空白を残すにはどうすればよいでしょうか? スペースアラウンドを考える人もいると思いますが、スペースアラウンドでできる先頭と最後尾のスペースは真ん中のスペースの半分なのでうまくいきません。

しかし、space-between では各サブ要素の中央に同じサイズのスペースが残り、最初と最後の要素が両側に近くなることがわかっています。これが space-between の動作原理であり、この原則に従って次のことができます。コンテナの上部に配置します。最後に、疑似要素を使用して幅 0 の要素を追加します。これは、最初と 5 番目の要素の両側に同じサイズの空白を追加することと同じになります。

コードを見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用space-between模拟space-evenly的效果</title>
    <style>
        .box{
            width: 400px;
            height: 200px;
            border:1px lightpink solid;
            display: flex;
        }
        .item{
            width: 40px;
            box-sizing: border-box;
            background: lightpink;
            border:1px solid purple;
        }
        /*下面的css在容器的最前和最后添加块元素，在flex布局中，子元素宽的大小默认为0*/
        .box::after,.box::before{
            content:"";
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

このようにして、望む効果を達成することができます。！！！

レイアウトスペース均等の互換性の問題

おすすめ