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

スペース均等互換性の問題を解決する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 をよろしくお願いいたします。

<<:  CSSの絶対と相対について

>>:  Linux で FastDFS を使用してイメージ サーバーを構築する

推薦する

mysql5.6.8 ソースコードのインストールプロセス

カーネル: [root@opop ~]# cat /etc/centos-release CentO...

CSSタグの表示モードの詳細な説明

ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

Vue3 親子コンポーネントパラメータ転送における sync 修飾子の使用法の詳細な説明

目次一方向データフローの説明Vue2.x の使用法親コンポーネントに変更を通知するイベントのフォーム...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。

1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

サーバーの購入と初期構築方法

しばらくサーバーいじってなかったけど、やることがなくなったのでモバイルワークスに行って海外サーバーを...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...