ギャップ？あえぎ！

最初は、フレックスボックス（ディスプレイの子供：フレックスコンテナ）がありました。それらを視覚的に分離したい場合は、コンテンツの正当化（つまり、正当なコンテンツ：スペースベトベット）、マージントリック、または時々両方を使用する必要がありました。その後、グリッド（ディスプレイ：グリッドコンテナ）が登場し、グリッドはグリッドギャップのおかげで、グリッドセル間でマージンされていない最小ギャップを持っている可能性があります。フレックスボックスにはギャップがありませんでした。

GAPのサポートの高まりのおかげで、グリッドに限定されないグリッドギャップの後継者のおかげでできます。ギャップを使用すると、グリッド、フレックスボックス、さらには複数の列をギャップできます。それはgaptasticです！

グリッドとのギャップ

ギャップが最も堅牢であるところから始めましょう：CSSグリッド。 HTMLとCSSの基本的なグリッドセットアップは次のとおりです。

 <section>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
</section>

セクション {
  ディスプレイ：グリッド;
  グリッドテンプレート列：繰り返し（2、auto）;
  Grid-Template-Columns：Repeat（4、auto）;
  ギャップ：1EM;
}
セクションdiv {
  幅：2em;
}

これにより、グリッドセルは互いに少なくとも1EMを離れます。分離距離は、この投稿の範囲を超えた他の条件に応じて、それよりも大きくなる可能性がありますが、少なくとも1EMで分離する必要があります。 （OK、1つの例を挙げましょう。ギャップのギャップはグリッドセルのマージンに加えているため、すべてのグリッドアイテムにマージンがある場合：2px;、グリッドセル間の視覚距離は少なくとも1EMと4pxです。）デフォルトでは、ギャップサイズを変更すると、グリッドアイテムがサイズを変更します。

これはすべて、ギャップは実際にはプロパティのrow-gapと列ギャップの速記であるためです。ギャップ：1EMはギャップとして解釈されます：1em 1em、これはrow-gap：1emの速記です。列ギャップ：1em;。異なる行と列のギャップ距離が必要な場合は、ギャップのようなもの：0.5EM 1EMがうまく機能します。

FlexBoxとのギャップ

FlexBoxコンテキストで同じことをすると、ギャップが得られますが、グリッドではまったく同じ方法ではありません。上記と同じHTMLを仮定しますが、このCSSは次のとおりです。

セクション {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：1EM;
}

フレックスボックスは、少なくともここでのギャップの値によって引き離され、フレックスコンテナ内のスペースがなくなったときに、新しいフレックスラインにラップをラップします。ギャップ距離を変更すると、フレックスアイテムのラッピングが変化する可能性がありますが、グリッドとは異なり、フレックスアイテム間のギャップを変更することで、フレックスアイテムのサイズは変更されません。ギャップの変更により、フレックスラッピングが異なる場所で発生する可能性があります。つまり、行ごとのフレックスアイテムの数は変わりますが、幅は同じままです（Flexで成長または縮小するように設定しない限り）。

マルチコラムとのギャップ

マルチコラムコンテンツの場合、ギャップには少し制限があります。列ギャップのみが使用されます。必要に応じて、マルチコラムの行のギャップを宣言できますが、無視されます。

セクション {
  列：2;
  ギャップ：1EM;
}

サポート

Gap、Row-Gap、および列ギャップのサポートは驚くほど広範です。 Mozillaは、バージョン61以来、バージョン66以来のChromium以来、そしてイガリアのセルジオVillarの仕事のおかげで、彼らはすぐにSafariとMobile Safariに来ています（彼らはすでにテクノロジープレビュービルドにあります）。したがって、グリッド、フレックス、またはマルチコラムのコンテンツが呼吸するためにもう少しスペースが必要な場合は、ギャップに落ちる準備をしてください！

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