Chromium이 Flexbox 격차를 획득합니다

CSS gap 속성은 Chromium의 CSS Flexbox 및 다중 열 레이아웃 엔진을 위한 것입니다.

Adam Argyle
David Grogan
David Grogan
GitHub

CSS 간격

gap는 흐름 관련입니다. 즉, 콘텐츠 흐름의 방향에 따라 동적으로 변경됩니다. 예를 들어 gap는 해외 사용자에 대해 설정한 다양한 writing-mode 또는 direction 값에 따라 자동으로 조정됩니다. 이렇게 하면 구성요소 및 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;
}


간격에 길이를 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%;
}

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

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

Chromium DevTools 업데이트

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

두 사람이 테이블에서 일하는 사무실
개발자 도구는 grid-gap와 gap를 모두 표시하며, 캐스케이드에서 최신 구문을 사용할 수 있도록 gap는 grid-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;
}

정말 멋지죠.