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()를 조정해야 하는 경우가 많습니다. 미디어 쿼리를 한두 개 추가하는 것은 그리 나쁘지 않은 것처럼 보이지만 더해져서 복잡한 레이아웃 로직으로 이어질 수 있습니다.

위 작성자는 하위 항목이 전혀 닿지 않도록 의도했습니다.

해결 방법: 공백

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

첫 번째 두 예시 (Flexbox gap 없음)에서는 하위 요소가 타겟팅되고 다른 요소와의 간격이 할당됩니다. 해결 방법 간격 예시에서 컨테이너는 간격을 소유합니다. 각 하위 사용자는 부담을 덜어주고 간격 소유권을 중앙 집중화할 수 있습니다. 일관성 간소화 재정렬, 뷰포트 변경, 요소 삭제, 새 요소 추가 등을 수행해도 간격이 일관되게 유지됩니다. 새로운 선택기도, 새로운 미디어 쿼리도, 공백만 있습니다.

Chromium DevTools 업데이트

이번 업데이트로 Chromium DevTools가 변경되었습니다. 이제 Styles 창에서 grid-gap 및 gap를 처리하는 방식을 확인하세요. 👍

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

새로운 레이아웃 가능성

Flexbox gap를 사용하면 편의성 외에도 더 많은 이점을 얻을 수 있습니다. 강력하고 완벽한 간격의 고유한 레이아웃을 제공합니다. 아래 동영상과 다음 코드 샘플에서 Grid는 Flexbox에서 가능한 레이아웃을 실행할 수 없습니다. 그리드는 본질적으로 할당되더라도 행과 열이 동일해야 합니다.

또한 하위 요소 사이의 간격이 본질적으로 이렇게 래핑될 때 얼마나 동적인지도 확인하세요. 미디어 쿼리는 이와 같은 래핑을 감지하여 지능형 조정을 할 수 없습니다. Flexbox gap는 모든 국제화에서 이 작업을 수행할 수 있으며 앞으로도 그럴 것입니다.

다중 열 gap

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

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

꽤 멋진데요.