Chromium が Flexbox のギャップに直面

CSS の gap プロパティは、Chromium の CSS Flexbox と Multi-Column レイアウト エンジンで使用されます。

Adam Argyle
David Grogan
David Grogan
GitHub

CSS Gap

gap はフロー相対です。つまり、コンテンツ フローの方向に基づいて動的に変化します。たとえば、海外のユーザー向けに設定した writing-mode または direction の値に応じて、gap が自動的に調整されます。これにより、コンポーネントと CSS の作成者にとって、スペーシングに関する課題の負担が大幅に軽減されます。コードの削減をさらに拡大。

方向と書き込みモードの変更を処理するローカライズ サポートを示すギャップ: Codepen | ツイート

ブラウザの互換性

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

用途

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 型の疑似クラス セレクタなどの方法が用いられていました。

Previous Attempts

ギャップのような間隔を実現するために使用されているパターンは次のとおりです。

疑似クラス セレクタ
.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 が処理されるようになりました 👍

テーブルで作業している 2 人がいるオフィス。
Devtools は grid-gap と gap の両方を表示します。カスケードで最新の構文を使用できるように、gap は grid-gap の下に表示されます。

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

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

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

ツイート

また、このように子要素が本来のサイズで折り返されると、子要素間のスペースが動的に変化することにも注目してください。メディアクエリでは、そのような折り返しを検出してインテリジェントな調整を行うことはできません。Flexbox gap は、すべての国際化でこれを実行できます。

複数列の gap

Flexbox が gap 構文をサポートしているだけでなく、マルチカラム レイアウトも短い gap 構文をサポートしています。

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

かなりすごい。