「ギャップ」を気にする

CSS gap属性は新しいものではありませんが、昨年は大きな新機能を獲得しました。現在、CSSグリッドだけでなくFlexBoxでも機能します。それを考えると、そして私はそのプロパティが見た目よりも複雑だと思いますが、私はそれがどのように機能するかを正確にレビューして説明したいと思います。

gapとそれらの関連する特性を詳しく見て、それらがどのように、どこで働くかを理解しましょう。

すべてのギャッププロパティ

まず、すべてのgap関連のCSSプロパティを確認しましょう。合計6つあります：

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

このリストから、最初の3つのプロパティを無視できます。 grid-*属性は、CSSグリッド仕様の起草の早い段階で追加され、 gapがより一般的になったときに後に廃止されました。ブラウザは依然としてこれらの非推奨grid-*プロパティ（この執筆時点で）をサポートしており、非grid-プレフィックスとしてのみ扱います。したがって、 grid-gapはgapと同じ、 grid-column-gap column-gapと同じ、 grid-row-gapはrow-gapと同じです。

他の3つのプロパティに関しては、 gap他の2つのプロパティを指定できる略語であることを考慮すると、 row-gapとcolumn-gap何をするかを実際に知る必要があります。

これらのプロパティを理解することは、使用するCSSレイアウトのタイプに依存します。まずこれらのオプションを見てみましょう。

ギャップはどこで使用できますか？

あなたが私のような場合は、グリッドレイアウトでgapを使用しましたが、今ではFlexBoxやマルチコラムレイアウトでも使用できます。各状況を確認しましょう。

グリッドのギャップ

すべてのブラウザは、グリッドレイアウトのgapをサポートしており、このコンテキストでは非常に簡単に理解できます。

• row-gap 、行トラック間にスペースを紹介します
• column-gap列の軌道間にスペースを導入します

3つの列と2行のグリッドを作成しましょう。

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>

これにより、次のグリッドが得られます。

上の図の線はグリッドラインと呼ばれ、グリッドのトラック（行と列）を分離します。これらの線はグリッドには実際には存在しません - 目に見えず、厚さはありません。通常、グリッドインスペクター（Safari、Firefox、Edge、またはChrome）を有効にすると、DevToolsが表示するものです。

ただし、グリッドにギャップを追加し始めると、これらのラインが厚さになり始めるように機能します。

20pxギャップを追加しましょう：

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>

これで、トラック間のラインが厚さ20pxなので、グリッドプロジェクトをさらに押し上げます。

したがって、トラックgrid-template-*まだ同じサイズを持っていることに注意してください。

グリッドでは、 row-gapは常に行トラック間で適用されます。したがって、上記の例でgap row-gapに置き換えると、次のようになります。

column-gapは常に列トラック間に適用されるため、 gap column-gapに置き換えると、次の結果が生成されます。

グリッドは簡単です。デフォルトでは、列が垂直であり、行がテーブルのように水平になるためです。したがって、 column-gapとrow-gapアプリケーションがどこにあるかを覚えるのは簡単です。

writing-modeを使用すると、物事はもう少し複雑になります。ネットワーク上のデフォルトの書き込みモードは左から右への水平モードですが、垂直書き込みモードもあります。これが起こると、列が水平になり、行が垂直になります。通常のように直感的ではない可能性があるため、常にwriting-modeに注意を払ってください。

列と行がFlexBoxで新しい意味を得るため、これは次のセクションへの適切な移行です。

フレックスボックスのギャップ

Flexboxレイアウトのギャップについて話しましょう。ここでは、物事がもう少し複雑になります。次の例を使用します。

 <code>.container { display: flex; }</code>

デフォルトでは、これにより、列のフレックスコンテナが得られます。つまり、コンテナ内のアイテムは左から右に同じ水平線に積み重ねられています。

この場合、 column-gapはプロジェクト間に適用され、 row-gap効果がありません。これは、1行（または行）が1つしかないためです。しかし、プロジェクト間にいくつかのギャップを追加しましょう。

 <code>.container { display: flex; column-gap: 10px; }</code>

次に、コンテナのflex-directionを列に切り替えます。次のコードを使用して、アイテムを上から下に垂直に積み重ねます。

 <code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>

次に何が起こるか：

ギャップは消えました。 column-gap 、コンテナが列の方向にあるときにアイテム間にスペースを追加しますが、列方向に動作しなくなります。

row-gapを使用して取得する必要があります。あるいは、両方向に同じギャップを適用する値でgap略語を使用することができるため、どちらの場合も機能します。

 <code>.container { display: flex; flex-direction: column; gap: 10px; }</code>

したがって、全体として、 column-gap常に垂直に動作します（デフォルトのwriting-modeを仮定して）、 row-gap常に水平方向に動作します。これは、フレックス容器の向きに依存しません。

しかし、今度はラインブレークを含む例を見てください：

 <code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code>

ここで、スペースがすべてを1行に保持するのに十分でない場合は、プロジェクトがflex-wrap: wrapを使用して複数のラインにラインをラップすることを許可します。

この場合、 column-gapはプロジェクト間に垂直に適用され、2つのフレックス行の間にrow-gapが水平に適用されます。

これとグリッドには興味深い違いがあります。列のギャップは、必ずしもフレックス行間に並べられているわけではありません。これは、 justify-content: centerプロジェクトをFlex Line内に中心にするためです。これにより、各フレックス行は、他の行とは独立してギャップが適用される別のレイアウトであることがわかります。

複数の列ギャップ

マルチコラムは、従来の新聞記事で予想されるように、コンテンツが複数の列間で自動的に流れるのを非常に簡単にするレイアウトタイプです。列の数を設定し、各列のサイズを設定します。

マルチコラムレイアウトのギャップは、グリッドやフレックスボックスとほとんど同じように機能しません。 3つの顕著な違いがあります。

• row-gapには効果がありません。
• column-gapには、0ではないデフォルト値があります。
• ギャップはスタイリングできます。

1つずつ分解しましょう。まず、 row-gapには効果がありません。マルチコラムレイアウトでは、行を分離する必要はありません。これはcolumn-gapのみが関連する（およびgap略語）ことを意味します。

第二に、グリッドやフレックスボックスとは異なり、マルチコラムレイアウトのcolumn-gapのデフォルト値は1EM（0ではなく）です。したがって、ギャップがまったく指定されていなくても、コンテンツ列はまだ視覚的に分離されています。もちろん、デフォルトではオーバーライドできますが、これは良いデフォルトです。

これが、例の基礎となるコードです。

 <code>.container { column-count: 3; padding: 1em; }</code>

最後に、マルチコラムレイアウトで列間のスペースをスタイリングできます。 borderと同様に機能するcolumn-ruleプロパティを使用します。

 <code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code>

ブラウザのサポート

gapあらゆる面で十分にサポートされています。 Caniuseに関する詳細情報はありますが、要するに：

• FlexBox： gapは、Android用のインターネットエクスプローラー（排除されようとしている）、Opera Mini、UCブラウザーを除くどこでもサポートされています。 Caniuseのグローバルサポート率は87.31％です。
• グリッド：同様に、しかし、93.79％のグローバルな承認評価が見られます。
• 複数の列：同様に、しかしSafariではサポートされていませんが、グローバルなサポート率は75.59％です。

したがって、全体として、 gapプロパティは十分にサポートされており、ほとんどの場合、回避策は必要ありません。

フレックスとグリッドの間のギャップのスタイルを設定する

FlexBoxとCSSグリッドのギャップをスタイリングすることは非常に便利です。残念ながら、今日はどこでもサポートされていません。しかし、良いニュースは、近い将来に実現される可能性があるということです。これはCSSワーキンググループで議論されており、Firefoxで開発されています。 Firefoxで効果的な実装と仕様の提案が得られたら、他のブラウザで実装を促進する可能性があります。

一方、いくつかの解決策があります。

1つの方法は、グリッドコンテナに背景色を与え、プロジェクトに別の色を与え、最後にギャップを残してコンテナの色を表示することです。

これは機能しますが、ギャップを使用してプロジェクト間にスペースを導入できないことを意味します。ここでのギャップは、境界幅として機能します。したがって、アイテムをより明確に視覚的に分離するには、アイテムにパディングまたはマージンを使用する必要がありますが、これは理想的ではありません。次のセクションで表示されるように。

マージンやパディングだけを使用できませんか？

はい、ほとんどの場合、 margin （および/またはpadding ）を使用して、レイアウト要素間に視覚的なスペースを追加することもできます。しかし、 gapにはいくつかの利点があります。

まず、ギャップはコンテナレベルで定義されます。これは、レイアウト全体でそれらを一度定義することを意味し、それらは常にレイアウトに一貫して適用されます。使用するマージンを各アイテムで宣言する必要があります。これは、プロジェクトが異なる性質のものである場合、または異なる再利用可能なコンポーネントから来る場合に複雑になる可能性があります。

最も重要なことは、 gapデフォルトで正しい操作を実行するために単一のコードのみを必要とすることです。たとえば、フレックスプロジェクトを囲むのではなく、フレックスプロジェクト間にスペースを導入しようとすると、マージンでは、最初のプロジェクトの前に余分なマージンと最後のプロジェクトの後の余分なマージンを削除するために特別な状況が必要です。ギャップを使用すると、これを行う必要はありません。

margin: 0 20px各フレックスプロジェクトでは、次のようになります。

ただし、 gap: 40px使用して、次のようになります。

また、グリッドレイアウトでは、コンテナレベルでのギャップを定義することは、各アイテムのマージンを定義し、グリッドエッジに適用されるマージンを考慮するよりもはるかに簡単で優れています。

margin: 20px ：

代わりに、グリッドコンテナでgap: 40px使用します。

空きスペースの蓄積

これまでに言ったことすべてに基づいて、 marginとgap相互に排他的である必要はありません。実際、レイアウトのプロジェクトをさらに分離するには多くの方法があり、それらはすべてうまく機能します。

gapプロパティは、レイアウトコンテナ内のボックスの間に作成された空きスペースの一部にすぎません。 margin 、 padding 、アライメントはすべて、 gapが定義されたスペースを増加させる可能性があります。

特定の幅、ギャップ、コンテンツ分布（ justify-contentを使用）、およびマージンとパディングを使用して、単純なフレックスレイアウトを構築する例を考えてみましょう。

 <code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>

このコードが次の結果を生み出すと仮定しましょう。

次に、プロジェクト間の空白のスペースがどのように作成されるかを正確に見てみましょう。

ご覧のとおり、2つの連続したフレックスプロジェクトの間には4つの異なるタイプの空白スペースがあります。

• 2つの連続したプロジェクトの間に、ギャップはこれらのプロジェクト間の最小スペースを定義します。この場合のように、より多くのスペースがあるかもしれませんが、スペースが少なくなることはありません。
• マージンはプロジェクトをさらに押し上げますが、ギャップとは異なり、すべてのプロジェクトの両側にスペースが追加されます。
• 充填は、各プロジェクト内のいくつかのスペースを提供します。
• 最後に、十分なスペースが残っている場合にのみ、コンテンツの分布が有効になり、 space-around値に基づいてフレックス行内のアイテムを均等に配布します。

デバッグギャップ

私に非常に近いトピックで終わりましょう：Devtoolsのデバッグギャップのサポート。エラーは常にあり、DevToolsが私たちをサポートできることを知ることは非常に喜ばしいことですが、どのツールが私たちを助けることができるかを知る必要があります。

gapについては、非常に便利な2つの特定の機能を考えることができます。

私のギャップは有効ですか？

gapを間違えたり、無効な値を提供したりしない限り、このプロパティは常にページに適用されます。たとえば、これは正しいです：

 <code>.some-class { display: block; gap: 3em; }</code>

それは何もしませんが、それは有効なCSSであり、ブラウザはブロックレイアウトではgapが機能しないことを気にしません。ただし、Firefoxには、これを行う「非アクティブCSS」と呼ばれる機能があります。意味のあるものに適用される効果的なCSSを気にします。この場合、Firefox Devtoolsは検査官に警告を表示します。

私のギャップはどこにありますか？

ChromeとMicrosoft Edgeには、非常に便利なデバッグギャップ機能もあります。ブラウザと他のブラウザの両方をサポートするオープンソースプロジェクトであるChromiumにレイアウトデバッグツールを構築することを目的として、MicrosoftとGoogleの間のコラボレーションを通じて追加されました。これらのブラウザでは、Stylesパネルのさまざまなプロパティの上にホバリングして、それらがページにどのように影響するかを確認できます。

それでおしまい。この記事は、CSSでの中間ギャップがどのように機能するかの詳細のいくつかを理解するのに役立つことを願っています。

以上が「ギャップ」を気にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。