기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid Layout(그리드 레이아웃)과 Flexbox(유연한 상자 레이아웃)에서는gap 행 간격(여백)과 열 간격(Flexbox에서는 "교차 축 간격"이라고도 함)의 크기를 모두 설정하는 축약된 속성입니다.이 속성은 이전에 별도로 설정해야 했던 필요성을 크게 단순화합니다.row-gap(또는 grid-row-gap 레거시 CSS 그리드에서) 및column-gap(또는 grid-column-gap) 번거로운 과정.

그리드 레이아웃에 사용됨

CSS 그리드 레이아웃에서는gap 속성은 그리드 행과 그리드 열 사이의 간격 크기를 동시에 설정할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

Flexbox에서 사용됨

플렉스박스에서는gap 속성은 Flex 항목 사이의 간격을 설정하는 데 사용됩니다. 여기에는 기본 축과 교차 축의 간격이 포함됩니다(Flexbox에서는 교차 축 간격의 개념이 주로 레이아웃에 영향을 미치기 때문에 Grid만큼 직관적이지 않을 수 있음). 여러 줄의 플렉스 컨테이너).

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

참고하시기 바랍니다,gap 속성 값은 길이일 수 있습니다(예:px、em、vw 등), 백분율 또는 기타row-gap그리고column-gap 허용되는 법적 값.추가로, 필요하신 경우row-gap그리고column-gap다른 값을 설정하려면 이 두 값을 다음과 같이 전달할 수 있습니다.gap이 속성은 두 개의 인수로 제공됩니다. 첫 번째 값은 행 간격에 해당하고 두 번째 값은 열 간격(Grid의 경우) 또는 교차 축 간격(Flexbox의 경우 덜 일반적임)에 해당합니다.

그럼에도 불구하고 주목할 가치가 있습니다.gap속성은 최신 브라우저 버전에서 널리 지원되지만 CSS는 여전히 이전 버전과의 호환성을 염두에 두고 작성되어야 하며 사용해야 할 수도 있습니다.-webkit-접두사(일부 이전 브라우저의 경우)를 사용하거나 대체를 제공하세요.