[CSSチュートリアル】空間均等性の問題を解決する2つの方法

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

しかし、ある開発プロジェクトで、space-evenlyには互換性の問題があることがわかりました。iPhone 5sでテストしたところ、justify-content: space-evenlyを指定したコンテナ内の子オブジェクトが、予想通り主軸に沿って均等に配置されず、左側に密集していることがわかりました。

.container {
  display: flex;
  justify-content: space-evenly;
}

表示 スペースイーブンは使えますか？ で、space-evenlyは比較的小さな範囲でサポートされていることがわかります。

のスペース・イーブン属性に関するMDN 定義 です。

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

この問題を解決するために、筆者は2つの方法を思いついた。

flex-growを使用する

flex-growは、コンテナ内の残りのスペースをどのように子要素に割り当てるかを指定します。
すべての子要素にflex-growを持たせる。1属性を同時に持たせることで、コンテナの空間を均等に共有し、「均等に配置され、等間隔に並ぶ」効果を実現します。

.container {
  display: flex;
  .child: {
    flex: 1;
  }
}

スペースバックを使用する

もう一つの方法は、space-evenly属性に似たspace-betweenを使うことです。この2つの属性は近く、space-betweenは互換性の問題とはほとんど無縁です。 この

その違いは、space-evenlyでは各子要素の左右のスペースが同じであるのに対し、space-betweenでは各行の最初の要素が行頭に、最後の要素が行末に揃うことです。

コンテナの中に5つの子要素があるとすると、この2つの属性の違いは、単純に次のように表現できる。

// space-evenly
|-sub-sub-sub-sub-sub-|

// space-between
| sub--sub--sub--sub--sub|

つまり、space-evenly は、最初と最後の子要素がコンテナの端のすぐそばにある space-between よりも、左右に 2 つ多い隙間を持つことになります。

この差を埋めるために、2つの疑似要素を使って、space-betweenに設定したときにコンテナに7つの子要素を与えれば、"6つの隙間 "を得ることができます。

|pseudo-sub-sub-sub-sub-sub-pseudo|

コード

.container {
  display: flex;
  justify-content: space-between;

  &:before,
  &:after {
    content: '';
    display: block;
  }
}

この記事は空間均等互換性の問題を解決する2つの方法を紹介します、もっと関連する空間均等互換性の内容はスクリプトハウスの過去の記事を検索してください、または引き続き以下の関連記事を閲覧してください、今後ともスクリプトハウスをもっと応援してください！。