Chromium이 Flexbox 격차를 획득합니다

CSS gap 속성은 Chromium의 CSS Flexbox 및 다중 열 레이아웃 엔진에 사용됩니다.

아담 아가일
데이비드 그로건
데이비드 그로건
GitHub

CSS 격차

gap은 흐름 상대입니다. 즉, 콘텐츠 흐름의 방향에 따라 동적으로 변경됩니다. 예를 들어 gap는 해외 사용자에게 설정한 다양한 writing-mode 또는 direction 값에 따라 자동으로 조정됩니다. 이렇게 하면 구성요소 및 CSS 작성자의 간격 문제를 크게 줄일 수 있습니다. 코드 확장이 줄어듭니다.

방향 및 쓰기 모드의 변경을 처리하므로 현지화 지원을 보여주는 격차: Codepen | 트윗

브라우저 호환성

브라우저 지원

  • 57
  • 16
  • 52
  • 10.1

소스

사용

gap는 모든 CSS 길이 또는 percentage를 값으로 허용합니다.

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


간격은 행과 열에 사용되는 두 길이의 길이를 전달할 수 있습니다.

약식
.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() 조정이 필요한 경우가 많습니다. 한두 개의 미디어 쿼리를 추가하는 것은 그리 나쁘지 않은 것 같지만 비용이 합쳐져 레이아웃 로직이 복잡해질 수 있습니다.

위의 작성자가 진정으로 의도한 것은 하위 항목이 전혀 터치되지 않도록 하는 것이었습니다.

해결책: 결함

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

처음 두 가지 예 (Flexbox gap 없음)에서는 하위 요소가 타겟팅되고 다른 요소로부터 간격이 할당됩니다. 해독제 간격 예시에서는 컨테이너가 간격을 소유합니다. 각 하위 요소는 부담을 덜는 동시에 공백 소유권을 중앙 집중화할 수 있습니다. 일관성 간소화 표시 영역 순서 변경, 변경, 요소 삭제, 새 요소 추가 등을 할 수 있습니다. 간격은 일관되게 유지됩니다. 새로운 선택기나 미디어 쿼리가 필요 없고 공간만 있습니다.

Chromium DevTools 업데이트

이러한 업데이트로 Chromium DevTools가 변경되었으므로 이제 Styles 창에서 grid-gap 및 gap가 어떻게 처리되는지 확인하세요. 👍

두 사람이 테이블에서 일하고 있는 사무실입니다.
Devtools는 grid-gap와 gap를 모두 표시하며 계단식에서 최신 구문을 사용하도록 하기 위해 grid-gap 아래에 gap가 사용됩니다.

DevTools는 grid-gap와 gap를 모두 지원합니다. 이는 gap가 기본적으로 이전 구문의 별칭이기 때문입니다.

새로운 레이아웃 활용

Flexbox gap으로 편리함 그 이상을 실현합니다. 강력하고 완벽한 간격의 고유한 레이아웃을 제공합니다. 아래의 동영상 및 다음 코드 샘플에서 그리드는 Flexbox에서 구현할 수 있는 레이아웃을 달성할 수 없습니다. 그리드에는 기본적으로 할당된 경우에도 동일한 행과 열이 있어야 합니다.

트윗

또한 하위 요소가 기본적으로 이렇게 래핑할 때 하위 요소 사이의 간격이 얼마나 동적인지 확인하세요. 미디어 쿼리는 지능적인 조정을 위해 이와 같은 래핑을 감지할 수 없습니다. Flexbox gap은 모든 국제화에서 이를 지원할 수 있습니다.

여러 열 gap

gap 문법을 지원하는 Flexbox 외에도 다중 열 레이아웃은 더 짧은 gap 문법도 지원합니다.

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

정말 멋져요.