Chromium が Flexbox のギャップに直面

Chromium の CSS Flexbox およびマルチカラム レイアウト エンジンには、CSS gap プロパティがあります。

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;
}

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

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

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

ギャップには、行と列に使用される 2 つの長さを渡すことができます。

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

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

フレックスボックス 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;
}

とてもいいですね。