flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレスポンシブなレイアウト ソリューションである flex は、レイアウト開発に多くの利便性をもたらします。 しかし、開発中に、space-evenly を使用すると互換性の問題が発生することがわかりました。iPhone 5s でテストしたところ、justify-content: space-evenly が設定されたコンテナー内の子要素が、期待どおりに主軸に沿って均等に分散されず、左に圧縮されていることがわかりました。 。容器 { ディスプレイ: フレックス; コンテンツの均等配置: スペースを均等に; } space-evenly を使用できますか? を確認した後、space-evenly のサポート範囲は確かに比較的狭いことがわかりました。 MDN における space-evenly プロパティの定義は次のとおりです。 フレックス アイテムは、指定された配置コンテナー内の主軸に沿って均等に分散されます。隣接するフレックス アイテム間の間隔、メイン軸の始点から最初のフレックス アイテムまでの間隔、およびメイン軸の終点から最後のフレックス アイテムまでの間隔はすべてまったく同じです。 この問題を解決するために、私は2つの方法を考えました。 flex-growの使用flex-grow は、コンテナーの残りのスペースを子要素にどのように分配するかを指定します。 。容器 { ディスプレイ: フレックス; 。子供: { フレックス: 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 をよろしくお願いいたします。 |
>>: Linux で FastDFS を使用してイメージ サーバーを構築する
カーネル: [root@opop ~]# cat /etc/centos-release CentO...
ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...
目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...
Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...
目次一方向データフローの説明Vue2.x の使用法親コンポーネントに変更を通知するイベントのフォーム...
よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...
1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...
Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...
序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...
名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...
取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
しばらくサーバーいじってなかったけど、やることがなくなったのでモバイルワークスに行って海外サーバーを...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...