목차
- justify-content 예제 - 기본축에서 아이템 정렬
- justify-content 정의
- justify-content 구문
- justify-content 예제 - 내부요소를 오른쪽에 정렬/배치
justify-content 예제 - 기본축에서 아이템 정렬
<style>
#hz {
width: 400px;
height: 100px;
border: 1px solid silver;
display: -webkit-flex; /* Safari */
-webkit-justify-content: center; /* Safari 6.1+ */
display: flex;
justify-content: center;
}
#hz div {
width: 70px;
height: 70px;
}
</style>
<div id="hz">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
결과보기
justify-content 정의
기본축의 양쪽 끝단을 기준으로, 아이템을 어떻게 균등 배분 정렬할지 결정.
※ 기본축과 그 시작점은 flex-direction 속성의 속성값에 따라 결정됨.
1.
align-items 속성 : 교차축 기준으로 아이템을 정렬.
2.
- 기본값: flex-start
- 상속여부: X
- 애니효과: X
- CSS버전: CSS3
- JS구문: object.style.justifyContent="space-between";
2.
IE11 이상, 주요 최신 브라우저 지원.
3.
MDN justify-content 예제 보기
justify-content 구문
selector {justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;}
[속성값]
flex-start
컨테이너 기본축 앞단에 아이템 배치. (※ 아이템 순서는 유지.) (기본값)
※ flex-direction 속성값에 reverse 추가된 경우, 역으로 끝단을 기산.
flex-end
컨테이너 기본축 끝단에 아이템 배치. (※ 아이템 순서는 유지.)
※ flex-direction 속성값에 reverse 추가된 경우, 역으로 앞단을 기산.
center
컨테이너 기본축 중단에 아이템 배치. (※ 아이템 순서는 유지)
※ 중앙에 안 오면, 부모 요소를 100% 설정 후 부모 요소나 해당 요소의 padding 값 수정.
space-between
컨테이너 기본축 기준 + 아이템 사이에만 공백 추가 + 아이템 양쪽 끝은 컨테이너에 붙임.
space-around
컨테이너 기본축 기준 + 아이템 둘레에 공백 추가 + 아이템 사이 공백 너비가 아이템 끝 공백 너비의 2배.
space-evenly
컨테이너 기본축 기준 + 아이템 사이에 공백 추가 + 아이템 사이든 끝이든 동일 너비의 공백. IE 지원 X
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
PS. 위 예제에서 핑크색 속성값을 바꿔가며 확인 바람.
justify-content 예제 - 내부요소를 오른쪽에 정렬/배치
<style>
#hz {
display:flex;
justify-content:flex-end;
width:90%;
min-width:100px;
padding:10px;
margin:30px auto;
background-color:yellow;
}
#hz .in {
width:100px;
height:100px;
}
</style>
<div id="hz">
<div>
<div class="in" style='background-color:red'>1</div>
<div class="in" style='background-color:blue;margin-top:10px'>2</div>
</div>
</div>
결과보기
비타주리 님 (210805) https://sir.kr/qa/425077
