スペース均等互換性の問題を解決する2つの方法についての簡単な説明

flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレスポンシブなレイアウト ソリューションである flex は、レイアウト開発に多くの利便性をもたらします。
justify-content プロパティは、フレックス レイアウトで非常によく使用されるプロパティで、主軸上の子要素の配置を定義します。 flex-start | flex-end | center | space-between | space-around | space-evenlyなどのプロパティがあります。

しかし、開発中に、space-evenly を使用すると互換性の問題が発生することがわかりました。iPhone 5s でテストしたところ、justify-content: space-evenly が設定されたコンテナー内の子要素が、期待どおりに主軸に沿って均等に分散されず、左に圧縮されていることがわかりました。

。容器 {
  ディスプレイ: フレックス;
  コンテンツの均等配置: スペースを均等に;
}

space-evenly を使用できますか? を確認した後、space-evenly のサポート範囲は確かに比較的狭いことがわかりました。

MDN における space-evenly プロパティの定義は次のとおりです。

フレックス アイテムは、指定された配置コンテナー内の主軸に沿って均等に分散されます。隣接するフレックス アイテム間の間隔、メイン軸の始点から最初のフレックス アイテムまでの間隔、およびメイン軸の終点から最後のフレックス アイテムまでの間隔はすべてまったく同じです。

この問題を解決するために、私は2つの方法を考えました。

flex-growの使用

flex-grow は、コンテナーの残りのスペースを子要素にどのように分配するかを指定します。
すべての子要素に flex-grow: 1 属性を設定すると、コンテナのスペースが均等に分割され、「均等な配分と等間隔」の効果が得られます。

。容器 {
  ディスプレイ: フレックス;
  。子供： {
    フレックス: 1;
  }
}

スペース間の使用

もう 1 つの方法は、space-evenly プロパティに似た space-between を使用することです。これら 2 つのプロパティは非常に近いため、space-between で互換性の問題が発生することはほとんどありません。

違いは、space-evenly では各子要素の両側に同じスペースがあるのに対し、space-between では各行の最初の要素が行の先頭に揃えられ、各行の最後の要素が行の末尾に揃えられることです。

コンテナー内に 5 つの子要素があると仮定すると、これら 2 つの属性の違いは次のように簡単に表現できます。

// 均等間隔
|--息子--息子--息子--息子--息子--|

// スペース間
|ジ・ジ・ジ・ジ・ジ・ジ|

つまり、space-evenly は、space-between よりも両側に 2 つ多くのギャップを持ちますが、space-between の最初の子要素と最後の子要素はコンテナーの端に近くなります。

このギャップを埋めるために、2 つの疑似要素を使用して、space-between に設定したときにコンテナーに 7 つの子要素を含めることができます。つまり、「6 つのギャップ」があることになります。

|偽--子--子--子--子--子--偽|

コード：

。容器 {
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;

  ＆：前に、
  ＆：後 {
    コンテンツ： '';
    表示: ブロック;
  }
}

これで、スペース均等互換性の問題を解決する 2 つの方法についての説明は終了です。スペース均等互換性に関するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。