'갭'을 염두에두고

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 갭

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에 대한 더 많은 정보가 있지만 간단히 말해

• Flexbox : gap Internet Explorer (제거 될 예정), Opera Mini 및 UC 브라우저를 제외한 모든 곳에서 지원됩니다. Caniuse의 글로벌 지원 비율은 87.31%입니다.
• 그리드 : 마찬가지로, 그러나 우리는 전 세계 승인 등급이 93.79%입니다.
• 다중 열 : 유사하게는 사파리에서는 지원되지 않으며 전 세계 지원 비율은 75.59%입니다.

따라서 전반적으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!