CSS gap
속성은 Chromium의 CSS Flexbox 및 다중 열 레이아웃 엔진에 사용됩니다.
CSS 격차
gap
은 흐름 상대입니다. 즉, 콘텐츠 흐름의 방향에 따라 동적으로 변경됩니다. 예를 들어 gap
는 해외 사용자에게 설정한 다양한 writing-mode
또는 direction
값에 따라 자동으로 조정됩니다. 이렇게 하면 구성요소 및 CSS 작성자의 간격 문제를 크게 줄일 수 있습니다. 코드 확장이 줄어듭니다.
브라우저 호환성
사용
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
를 모두 지원합니다. 이는 gap
가 기본적으로 이전 구문의 별칭이기 때문입니다.
새로운 레이아웃 활용
Flexbox gap
으로 편리함 그 이상을 실현합니다. 강력하고 완벽한 간격의
고유한 레이아웃을 제공합니다. 아래의 동영상 및 다음 코드 샘플에서 그리드는 Flexbox에서 구현할 수 있는 레이아웃을 달성할 수 없습니다. 그리드에는 기본적으로 할당된 경우에도 동일한 행과 열이 있어야 합니다.
또한 하위 요소가 기본적으로 이렇게 래핑할 때 하위 요소 사이의 간격이 얼마나 동적인지 확인하세요. 미디어 쿼리는 지능적인 조정을 위해 이와 같은 래핑을 감지할 수 없습니다.
Flexbox gap
은 모든 국제화에서 이를 지원할 수 있습니다.
여러 열 gap
gap
문법을 지원하는 Flexbox 외에도 다중 열 레이아웃은 더 짧은 gap
문법도 지원합니다.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
정말 멋져요.