CSS를 사용하여 Flexbox 항목의 간격을 적절하게 지정하는 방법은 무엇입니까?

CSS를 사용하여 Flexbox 항목 사이의 거리를 조정하는 방법

여백: 0 5px 및 여백: 0을 사용하여 Flexbox 항목 사이의 최소 거리 설정 - 5px가 해결 방법처럼 보일 수 있습니다. 그러나 이 목적을 위해 설계된 전용 CSS 속성이 있습니다:

CSS gap 속성:

최신 브라우저에서 gap 속성은 다중 열, Flexbox, 그리고 그리드 레이아웃. 행과 열 사이의 간격을 설정합니다:

#box {
  display: flex;
  gap: 10px;
}

CSS row-gap 속성:

Flexbox 및 그리드 레이아웃의 경우 row-gap은 행과 열 사이의 간격을 정의합니다. 행:

#box {
   display: flex;
   row-gap: 10px;
}

CSS 열 간격 속성:

다중 열, 가변 상자 및 그리드 레이아웃에서 열 간격은 열 사이의 간격을 지정합니다.

#box {
  display: flex;
  column-gap: 10px;
}

예:

사용법을 설명하려면 다음을 고려하세요. 코드:

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

이 코드는 4개의 회색 항목이 10픽셀 간격으로 균등하게 배치된 Flexbox를 만듭니다.

위 내용은 CSS를 사용하여 Flexbox 항목의 간격을 적절하게 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!