justify-content

사용법

그리드 컨테이너의 크기보다 작은 그리드 아이템 트랙(px와 같은 고정 단위로 설정된 경우)의 크기라면, 아이템 트랙을 정렬할 수 있습니다. 이 속성은 행(row) 축을 따라 그리드 아이템 트랙을 정렬합니다. (align-content 속성의 반대)

속성

값

justify-content

start

center

end

stretch

space-around

space-between

space-evenly

값

start: 그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬
center: 그리드 컨테이너 영역의 중앙에 아이템 트랙을 정렬
end: 그리드 컨테이너 영역의 끝점에 아이템 트랙을 정렬
stretch: 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움
space-around: 그리드 컨테이너의 남은 영역을 아이템 트랙(열)이 좌/우 공간으로 나눔 (양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)
space-between: 그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(열) 사이 공간을 나눔
space-evenly: space-around와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름 (아래 예시 그림 참조)

예시

.grid-container {
  justify-content: start;
}

.grid-container {
  justify-content: center;
}

.grid-container {
  justify-content: end;
}

.grid-container {
  justify-content: stretch;
}

.grid-container {
  justify-content: space-around;
}

.grid-container {
  justify-content: space-between;
}

.grid-container {
  justify-content: space-evenly;
}

Last updated 5 years ago