CSS gap 속성은 새로운 것이 아니지만 작년에는 큰 새로운 기능을 얻었습니다. 이제 CSS 그리드뿐만 아니라 Flexbox에서도 작동합니다. 그 점을 감안할 때, 나는 그 부동산이 보이는 것보다 더 복잡하다고 생각합니다. 나는 그것이 어떻게 작동하는지 정확하게 검토하고 설명하고 싶습니다.
gap 과 관련 특성을 자세히 살펴보고 그들이 어떻게 그리고 어디에서 작동하는지 이해합시다.
먼저, 모든 gap 관련 CSS 속성을 검토합시다. 총 6 개가 있습니다.
grid-row-gap
grid-column-gap
grid-gap
row-gap
column-gap
gap
이 목록에서 우리는 처음 세 가지 속성을 무시할 수 있습니다. grid-* 속성은 CSS 그리드 사양을 작성하는 초기에 추가되었으며 나중에 gap 더 일반화되면 더 이상 사용되지 않았습니다. 브라우저는 여전히 이러한 감가 상각 된 grid-* 속성 (이 글을 쓰는 시점에서)을 지원하며이를 grid- 접두사로만 취급합니다. 따라서 grid-gap 은 gap 과 동일하며 grid-column-gap column-gap 과 동일하며 grid-row-gap row-gap 과 동일합니다.
다른 세 가지 속성에 관해서는 gap 다른 두 속성을 지정할 수있는 약어라는 점을 고려할 때 실제로 row-gap 과 column-gap 어떤 일을하는지 알아야합니다.
이러한 속성에 대한 우리의 이해는 우리가 사용하는 CSS 레이아웃의 유형에 따라 다릅니다. 먼저이 옵션을 살펴 보겠습니다.
당신이 나와 같다면, 당신은 그리드 레이아웃에 gap 사용했지만 이제는 Flexbox와 다중 열 레이아웃에서도 사용할 수 있습니다. 각 상황을 검토합시다.
모든 브라우저는 그리드 레이아웃의 gap 지원하며 이러한 맥락에서 이해하기가 매우 쉽습니다.
row-gap 행 트랙 사이에 공간을 소개합니다column-gap 열 궤도 사이에 공간을 소개합니다3 개의 열과 2 개의 행으로 그리드를 만들어 봅시다.
<code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>이것은 우리에게 다음과 같은 그리드를 줄 것입니다.
위 그림의 선을 그리드 라인 이라고하며 그리드의 트랙 (행 및 열)을 분리합니다. 이 라인은 그리드에 실제로 존재하지 않습니다. 그들은 보이지 않으며 두께가 없으며, 그리드 검사관 (사파리, 파이어 폭스, 모서리 또는 크롬)을 활성화 할 때 일반적으로 DevTools가 표시하는 것입니다.
그러나 그리드에 간격이 추가되기 시작하면이 라인이 두께를 얻기 시작하는 것처럼 작동합니다.
20px 간격을 추가합시다 :
<code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>이제 트랙 사이의 선은 20px 두께이므로 그리드 프로젝트를 더 밀어 넣습니다.
트랙은 여전히 같은 크기를 가지고 있다는 점에 주목할 가치가 있습니다 ( grid-template-* 속성에 의해 정의 됨).
그리드에서 row-gap 항상 행 트랙 사이에 적용됩니다. 따라서 위의 예에서 gap row-gap 으로 바꾸면 다음을 얻을 수 있습니다.
column-gap 항상 열 트랙 사이에 적용되므로 gap column-gap 으로 바꾸는 것은 다음과 같은 결과를 얻을 수 있습니다.
기본적으로 열은 수직이고 행은 테이블과 마찬가지로 수평이기 때문에 그리드는 간단합니다. 따라서 column-gap 및 row-gap 응용 프로그램이 어디에 있는지 기억하기 쉽습니다.
이제 writing-mode 사용할 때 상황이 조금 더 복잡해집니다. 네트워크의 기본 쓰기 모드는 왼쪽에서 오른쪽으로 수평 모드이지만 수직 쓰기 모드도 있습니다.이 경우 열이 수평이되고 행이 수직이됩니다. 일반적으로 직관적이지 않기 때문에 항상 writing-mode 에주의를 기울이십시오.
열과 행은 Flexbox에서 새로운 의미를 얻으므로 다음 섹션으로의 좋은 전환입니다.
Flexbox 레이아웃의 간격에 대해 이야기 해 봅시다. 다음 예를 사용합니다.
<code>.container { display: flex; }</code>기본적으로 행 플렉스 컨테이너가 제공됩니다. 즉, 컨테이너 내부의 품목은 왼쪽에서 오른쪽으로 동일한 수평선에 쌓입니다.
이 경우 column-gap 프로젝트간에 적용되며 row-gap 영향을 미치지 않습니다. 한 줄 (또는 줄) 만 있기 때문입니다. 그러나 이제 프로젝트간에 약간의 차이를 추가합시다.
<code>.container { display: flex; column-gap: 10px; }</code> 이제 컨테이너의 flex-direction 열로 전환하여 다음 코드를 사용하여 품목을 위에서 아래로 수직으로 쌓는다.
<code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>다음에 일어나는 일 :
간격이 사라졌습니다. column-gap 가 행 방향에있을 때 항목 사이에 공간이 추가 되더라도 더 이상 열 방향으로 작동하지 않습니다.
우리는 그것을 검색하려면 row-gap 사용해야합니다. 또는 양방향으로 동일한 간격을 적용 할 값으로 gap 약어를 사용할 수 있으므로 두 경우 모두 작동합니다.
<code>.container { display: flex; flex-direction: column; gap: 10px; }</code> 따라서 대체로 column-gap 항상 수직으로 작동합니다 (기본 writing-mode 가정하면) row-gap 항상 수평으로 작동합니다. 이것은 플렉스 컨테이너의 방향에 의존하지 않습니다.
그러나 이제 라인 브레이크와 관련된 예를 살펴보십시오.
<code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code> 여기서 공간이 한 줄로 모든 것을 고정하기에 충분하지 않은 경우, 프로젝트가 flex-wrap: wrap 사용하여 여러 줄에 라인을 랩핑 할 수 있습니다.
이 경우, column-gap 은 여전히 프로젝트 사이에 수직으로 적용되며 row-gap 두 개의 플렉스 행 사이에 수평으로 적용됩니다.
이것과 그리드 사이에는 흥미로운 차이가 있습니다. 열 간격이 반드시 플렉스 행에서 정렬되지는 않습니다. justify-content: center 프로젝트를 플렉스 라인 내에서 중심으로하기 때문입니다. 이런 식으로, 우리는 각 Flex 행이 다른 행과 독립적으로 간격이 적용되는 별도의 레이아웃임을 알 수 있습니다.
다색은 전통적인 신문 기사에서 기대할 수 있듯이 여러 열 사이에 콘텐츠가 자동으로 흐르기가 매우 쉬운 레이아웃 유형입니다. 열 수를 설정하고 각 열의 크기를 설정합니다.
다중 열 레이아웃의 간격은 그리드 나 플렉스 박스와 거의 동일하게 작동하지 않습니다. 주목할만한 차이점은 다음과 같습니다.
row-gap 효과가 없습니다.column-gap 기본값이 0이 아닌 기본값을 가지고 있습니다. 하나씩 분해합시다. 첫째, row-gap 효과가 없습니다. 멀티 컬럼 레이아웃에서는 행을 분리 할 필요가 없습니다. 이것은 column-gap 만 관련이 있음을 의미합니다 (및 gap 약어).
둘째, 그리드 및 플렉스 박스와 달리 멀티 컬럼 레이아웃에서 column-gap 의 기본 값은 0이 아닌 1EM입니다. 따라서 간격이 전혀 없더라도 컨텐츠 열은 여전히 시각적으로 분리되어 있습니다. 물론 기본적으로 재정의 할 수 있지만 이것은 좋은 기본값입니다.
예제가 기반을 둔 코드는 다음과 같습니다.
<code>.container { column-count: 3; padding: 1em; }</code> 마지막으로, 우리는 다중 열 레이아웃에서 열 사이의 공간을 스타일링 할 수 있습니다. 우리는 border 과 유사하게 작동하는 column-rule 속성을 사용합니다.
<code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code> gap 모든 측면에서 잘 지원되었습니다. Caniuse에 대한 더 많은 정보가 있지만 간단히 말해
gap Internet Explorer (제거 될 예정), Opera Mini 및 UC 브라우저를 제외한 모든 곳에서 지원됩니다. Caniuse의 글로벌 지원 비율은 87.31%입니다. 따라서 전반적으로 gap 속성은 잘 지원되며 대부분의 경우 해결 방법이 필요하지 않습니다.
Flexbox와 CSS 그리드의 간격을 스타일링하는 것이 매우 유용합니다. 불행히도, 그것은 오늘날 어디에서나 지원되지 않습니다. 그러나 좋은 소식은 가까운 시일 내에 실현 될 수 있다는 것입니다. 이것은 CSS 실무 그룹에서 논의되었으며 Firefox에서 개발 중입니다. Firefox에 효과적인 구현 및 사양 제안이 있으면 다른 브라우저에서 구현을 구동 할 수 있습니다.
한편, 몇 가지 해결책이 있습니다.
한 가지 방법은 그리드 컨테이너에 배경색을 제공 한 다음 프로젝트에 다른 색상을 제공하고 마지막으로 컨테이너 색상을 나타 내기 위해 간격을 남기는 것입니다.
이것이 효과가 있지만, 우리는 갭을 사용하여 프로젝트 사이에 공간을 도입 할 수 없다는 것을 의미합니다. 여기서 간격은 경계 너비 역할을합니다. 따라서 품목을 더 명확하게 시각적으로 분리하려면 항목에 패딩이나 여백을 사용해야합니다. 다음 섹션에서 볼 수 있듯이 이상적이지 않습니다.
예, 대부분의 경우 margin (및/또는 padding )을 사용하여 레이아웃 요소 사이에 시각적 공간을 추가 할 수 있습니다. 그러나 gap 에는 몇 가지 장점이 있습니다.
먼저, 갭은 컨테이너 레벨 에서 정의됩니다. 즉, 전체 레이아웃에 대해 한 번 정의하고 레이아웃에 항상 일관되게 적용됩니다. 사용 마진은 각 항목에 선언해야합니다. 프로젝트가 특성이 다르거나 재사용 가능한 구성 요소에서 나올 때 복잡해질 수 있습니다.
가장 중요한 것은 gap 기본적으로 올바른 작업을 수행하기 위해 단일 코드 줄만 필요하다는 것입니다. 예를 들어, Flex 프로젝트를 둘러싼 대신 공간을 소개하려고하면 마진은 첫 번째 프로젝트 전에 추가 마진을 제거하고 마지막 프로젝트 후에 추가 마진을 제거하기 위해 특별한 상황이 필요합니다. 갭을 사용하여 우리는 이것을 할 필요가 없습니다.
margin: 0 20px 사용하면 다음을 얻을 수 있습니다.
그러나 컨테이너에서 gap: 40px 사용하면 다음을 얻을 수 있습니다.
또한 그리드 레이아웃에서는 컨테이너 레벨에서 간격을 정의하는 것이 각 품목의 마진을 정의하고 그리드 가장자리에 적용되는 여백을 고려하는 것보다 훨씬 간단하고 낫습니다.
각 그리드 프로젝트에서 margin: 20px :
대신 그리드 컨테이너에서 gap: 40px 사용하십시오.
지금까지 말한 모든 것을 바탕으로 margin 과 gap 상호 배타적 일 필요는 없습니다. 실제로 레이아웃 프로젝트를 더 분리하는 방법에는 여러 가지가 있으며 모두 함께 잘 작동합니다.
gap 속성은 레이아웃 컨테이너의 상자 사이에 생성 된 빈 공간의 일부일뿐입니다. margin , padding 및 정렬은 모두 정의 된 gap 을 증가시킬 수 있습니다.
주어진 너비, 일부 간격, 일부 컨텐츠 분포 ( justify-content 사용) 및 일부 여백 및 패딩을 사용하여 간단한 플렉스 레이아웃을 구축하는 예를 고려해 봅시다.
<code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>이 코드가 다음 결과를 생성한다고 가정 해 봅시다.
이제 프로젝트 사이의 빈 공간이 어떻게 생성되는지 정확히 살펴 보겠습니다.
우리가 볼 수 있듯이, 두 개의 연속 플렉스 프로젝트 사이에는 네 가지 유형의 빈 공간이 있습니다.
space-around 값에 따라 Flex 행 내에서 항목을 균일하게 배포합니다.나에게 매우 가까운 주제 : DevTools의 디버그 격차에 대한 지원으로 끝내자. 항상 오류가있을 것이며, DevTools가 우리를 지원할 수 있다는 것을 아는 것은 매우 기쁘게 생각하지만, 우리는 어떤 도구가 우리를 도울 수 있는지 알아야합니다.
gap 의 경우 매우 유용 할 수있는 두 가지 특정 기능을 생각할 수 있습니다.
우리가 gap 잘못하거나 잘못된 값을 제공하지 않는 한,이 속성은 항상 페이지에 적용됩니다. 예를 들어, 이것은 정확합니다.
<code>.some-class { display: block; gap: 3em; }</code> 아무것도하지 않지만 유효한 CSS이며 브라우저는 gap 블록 레이아웃과 함께 작동하지 않는다고 생각합니다. 그러나 Firefox는 "비활성 CSS"라는 기능을 가지고 있습니다. 이 경우 Firefox Devtools는 검사관에 경고를 표시합니다.
Chrome과 Microsoft Edge에는 매우 유용한 디버깅 갭 기능이 있습니다. 브라우저 및 기타 브라우저 모두를 지원하는 오픈 소스 프로젝트 인 Chromium에 레이아웃 디버깅 도구를 구축하기위한 Microsoft와 Google 간의 협업을 통해 추가되었습니다. 이 브라우저에서는 Styles 패널의 다양한 속성을 가리키고 페이지에 어떤 영향을 미치는지 확인할 수 있습니다.
그게 다야. 이 기사가 CSS에서 중간 갭이 어떻게 작동하는지에 대한 세부 사항을 이해하는 데 도움이되기를 바랍니다.
위 내용은 '갭'을 염두에두고의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
