justify-content
justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
justify-content
justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
정의(Definition)
- justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
- justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의하고 align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다.
- justify-content 속성은 display:flex; 상태에서 적용됩니다.
문법(Syntax)
justify-content : flex-start | flex-end | center | space-between | space-around
속성(Property)
속성값 | 설명 |
---|---|
flex-start | 요소의 정렬 상태를 왼쪽(기본)으로 설정합니다. |
flex-end | 요소의 좌우 정렬 상태를 오른쪽 끝점으로 설정합니다. |
center | 요소의 좌우 정렬 상태를 가운데로 설정합니다. |
space-between | 요소와 요소사이의 간격을 왼쪽과 오른쪽을 기준으로 설정합니다. |
space-around | 요소와 요소사이의 간격을 가운데를 기준으로 설정합니다. |
inherit | justify-content의 속성 값을 상위요소한테 상속받습니다. |
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
justify-content | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |