틈? 헐떡 야!

처음에는 Flexboxes (디스플레이의 어린이 : Flex 컨테이너)가있었습니다. 시각적으로 분리되기를 원한다면 콘텐츠 정당화 (예 : 정당화 : 공간 중간), 마진 속임수 또는 때로는 둘 다를 사용해야했습니다. 그런 다음 그리드 갭 덕분에 그리드 (디스플레이 : 그리드 컨테이너)가 등장하고 그리드는 그리드 셀간에 최소한의 간격이 없을 수 있습니다. Flexboxes에는 차이가 없었습니다.

이제 그들은 그리드에 국한되지 않은 그리드 갭 후속 업체 인 GAP의 지원이 증가함에 따라 할 수 있습니다. 갭을 사용하면 그리드, 플렉스 박스 및 여러 열을 간격 할 수 있습니다. 그것은 gaptastic입니다!

그리드로 간격

갭이 가장 강력한 곳에서 시작합시다 : CSS 그리드. HTML 및 CSS의 기본 그리드 설정은 다음과 같습니다.

 
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
섹션>

 부분 {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 반복 (2, auto);
  그리드-템플릿-컬럼 : 반복 (4, auto);
  간격 : 1em;
}
섹션 div {
  너비 : 2em;
}

그리드 셀을 서로 적어도 1에 떨어 뜨립니다. 분리 거리는이 게시물의 범위를 벗어난 다른 조건에 따라 그보다 클 수 있지만 최소한 1EM으로 분리되어야합니다. (OK, 한 가지 예를 들어 봅시다. GAP의 간격은 그리드 셀의 여백에 추가되므로 모든 그리드 품목에 여백이있는 경우, 2px;

갭은 실제로 속성 행 갭 및 열 갭에 대한 속기이기 때문에이 모든 것이 작동합니다. 갭 : 1em은 갭으로 해석됩니다 : 1em 1em, 이는 행 갭에 대한 속기입니다 : 1em; 열 갭 : 1em;. 다른 행과 열 간격 거리를 원한다면 Gap : 0.5em 1em과 같은 것이 멋지게 수행됩니다.

Flexbox와의 간격

Flexbox 컨텍스트에서 똑같은 일을하면 격차가 있지만 그리드에서 발생하는 것과 같은 방식은 아닙니다. 위와 동일한 HTML을 가정하지만이 CSS 대신 :

 부분 {
  디스플레이 : Flex;
  플렉스 랩 : 랩;
  간격 : 1em;
}

Flexboxes는 적어도 여기의 간격 값에 의해 밀려 나고 (Flex-Wrap 덕분에) Flex 컨테이너 내부의 공간이 부족할 때 새로운 Flex 라인으로 감싸십시오. 간격 거리를 변경하면 Flex 품목의 포장이 변경 될 수 있지만 그리드와 달리 Flex 품목 간의 간격을 변경하면 Flex 품목의 크기가 변경되지 않습니다. 갭 변경으로 인해 플렉스 랩핑이 다른 장소에서 발생할 수 있습니다. 즉, 행당 플렉스 품목의 수가 변경되지만 너비는 동일하게 유지됩니다 (플렉스를 통해 성장하거나 줄어들도록 설정하지 않는 한).

멀티 컬럼과의 간격

멀티 컬럼 내용의 경우 갭에 대한 약간의 제한이 있습니다. 열 간격 만 사용됩니다. 원한다면 여러 폭도에 대한 행 간격을 선언 할 수 있지만 무시됩니다.

 부분 {
  열 : 2;
  간격 : 1em;
}

지원하다

갭, 행 갭 및 열 갭에 대한 지원은 놀랍게도 널리 퍼져 있습니다. Mozilla는 버전 66 이후 버전 66 이후 버전 66 이후로 그들을 가지고 있었고 Igalia의 Sergio Villar의 일 덕분에 곧 Safari와 Mobile Safari에오고 있습니다 (이미 기술 미리보기 빌드에 있습니다). 따라서 그리드, 플렉스 또는 멀티 컬럼 콘텐츠가 숨을 쉬기 위해 좀 더 많은 공간이 필요한 경우 격차에 빠질 준비를하십시오!

위 내용은 틈? 헐떡 야!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!