Chromium이 Flexbox 격차를 획득합니다

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

Adam Argyle

David Grogan

CSS 간격

핵심 용어: gap는 하위 요소 간의 간격입니다. 이러한 유형의 간격을 '여백' 또는 '틈'이라고 부르는 것을 들어 보셨을 것입니다. 하위 상자 가장자리가 닿는 공간만 있습니다.

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

방향 및 writing-mode 변경사항을 처리하므로 현지화 지원을 보여주는 Gap: Codepen | 트윗

브라우저 호환성

브라우저 지원

• 57
• 16
• 52
• 10.1

소스

사용

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

lobotomized owl

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

트윗

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

다중 열 gap

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

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

꽤 멋진데요.