Chromium が Flexbox のギャップに直面

CSS gap プロパティは、Chromium の CSS Flexbox エンジンとマルチ列レイアウト エンジン用です。

Adam Argyle

David Grogan

CSS のギャップ

gap はフロー相対です。つまり、コンテンツ フローの方向に応じて動的に変化します。たとえば gap は、海外のユーザーに設定した writing-mode や direction の値に応じて自動的に調整されます。これにより、コンポーネントと CSS 作成者が遭遇する間隔の課題が大幅に軽減されます。コードをさらにスケーリングする必要がある場合。

ブラウザの互換性

用途

gap は、値として任意の CSS 長さまたは割合を受け入れます。

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

Gap には 1 つの長さを渡すことができます。この長さは行と列の両方に使用されます。

.grid {
  display: grid;
  gap: 10px;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

Gap には 2 つの長さを渡すことができます。これは行と列に使用されます。

.grid {
  display: grid;
  gap: 10px 5%;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

gap が Flexbox に導入される前は、ネガティブ マージン、複雑なセレクタ、:last または :first タイプの疑似クラス セレクタ、または動的レイアウトとラップされる子セットのスペースを管理するその他の手段が戦略に含まれていました。

前回の試行

以下は、ギャップのような間隔を取るためにユーザーが使用しているパターンです。

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

ただし、上記は gap の完全な代替ではなく、折り返しのシナリオ、書き込みモード、方向を考慮して @media または :lang() を調整することがよくあります。1 つまたは 2 つのメディアクエリを追加することはそれほど悪くないように思えますが、追加されるとレイアウト ロジックが複雑になる可能性があります。

上記の作成者は、子アイテムがすべてタップされないようにすることを意図していました。

アンチドット: ギャップ

.layout {
  display: flex;
  gap: 10px;
}

最初の 2 つの例（Flexbox gap なし）では、子要素がターゲットに設定され、他の要素からの間隔が割り当てられます。アンチドート ギャップの例では、コンテナが間隔を所有しています。各子プロセスは負担を軽減し、スペースの所有権を集中化できます。整合性の簡素化並べ替え、ビューポートの変更、要素の削除、新しい要素の追加などを行っても、間隔は一定に保たれます。新しいセレクタや新しいメディアクエリはなく、スペースのみです。

Chromium DevTools の更新

このアップデートにより Chromium DevTools が変更されています。[スタイル] ペインで grid-gap と gap がどのように処理されるかに注目してください ️

DevTools は grid-gap と gap の両方をサポートしています。これは、gap が基本的に以前の構文のエイリアスであるためです。

新しいレイアウトの可能性

Flexbox gap を使用すると、利便性だけでなく、強力で、完璧な間隔の組み込みレイアウトを実現できます。動画と以下のコードサンプルでは、グリッドは Flexbox が実現できるレイアウトを実現できません。グリッドの行と列は、本質的に割り当てられている場合でも、同じである必要があります。

また、このように子要素がネイティブに折り返される場合、子要素間のスペースが動的に調整されることにも注目してください。メディアクエリは、そのようなラッピングを検出してインテリジェントな調整を行うことができません。Flexbox gap は、すべての国際化でこの処理を自動的に行います。

複数列の gap

Flexbox は gap 構文をサポートしていますが、マルチ列レイアウトはより短い gap 構文もサポートしています。

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

かなりかっこいいですね。