Flexbox 항목 사이의 간격을 어떻게 쉽게 제어할 수 있습니까?

Flexbox 항목 간격 관리

질문:

Flexbox 레이아웃에서 조정하는 방법 복잡하게 얽매이지 않고 항목 사이의 거리 여백?

**답변:

CSS 간격 속성:

고급 브라우저의 경우 간격 속성을 활용하여 세로 및 세로 간격을 모두 설정할 수 있습니다. 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;
}

예:

다음 스니펫은 gap 속성을 사용하여 Flexbox 사이에 간격을 만드는 방법을 보여줍니다. 항목:

<div>

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

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

위 내용은 Flexbox 항목 사이의 간격을 어떻게 쉽게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!