목차
justify-items 예제 - 인라인축 부분단위별 아이템 일괄 정렬 justify-items 정의 justify-items 구문 justify-items 예제 - 개별 아이템에 justify-self: right; 설정된 경우 justify-items 예제 - 개별 아이템에 position: absolute; 설정된 경우 justify-items 예제 - 컨테이너에 writing-mode: vertical-rl; 설정된 경우 justify-items 예제 - 컨테이너에 direction: rtl; 설정된 경우
justify-items 예제 - 인라인축 부분단위별 아이템 일괄 정렬
<style>
#container {
width: 50%;
aspect-ratio: 2/1;
border: 1px solid gray;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: end;
}
#container > div {
border: 1px solid black;
}
.a { background-color: coral; width: 40%;}
.b { background-color: lightblue; width: 50%;}
.c { background-color: lightgreen; width: 60%;}
</style>
<div id="container">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="a">4</div>
</div>
결과보기
justify-items 정의
인라인축 부분단위별 아이템 일괄 정렬.
1.
영어 경우, 인라인방향은 왼쪽에서 오른쪽이고, 블록방향은 아래쪽임.
아이템 주위에 인라인방향으로 사용 가능한 공간이 있어야 작동함. (즉, 부분단위가 아이템크기보다 커야 효과 나타남.)
이 속성은 flexbox 시스템에선 작동 X align-items 속성 - 블락방향으로 부분단위별 아이템 일괄 정렬. (이 속성은 flexbox 시스템에서도 자동 O)jusfity-self 속성 - 인라인축 부분단위별 그리드 아이템 개별 지정.
2. 이 속성의 효과는 현재 사용 중인 레이아웃 모드에 따라 달라짐.
블록수준 레이아웃 - 인라인축 기준, 포함블럭내 아이템 정렬.
절대위치 레이아웃 - top, left, bottom, right 의 오프셋 값 고려해, 인라인축 기준 포함 블록 내부의 아이템 정렬.
테이블셀 레이아웃 - 적용 X
Flexbox 레이아웃 - 적용 X 그리드 레이아웃 - 인라인축 부분단위별 아이템 정렬.
3.
기본값: legacy
상속여부: X
애니가능: O
CSS버전: CSS3
JS구문: object .style.justifyItems="center";
4.
IE 11 이상 주요 최신 브라우저 모두 지원 .
5. MDN justify-items 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
justify-items 구문
selector {justify-items: legacy|normal|stretch|positional alignment |overflow-alignment |baseline alignment |initial|inherit;}
[속성값]
legacy
아이템 속성값이 justify-self:auto 인 경우, 컨테이너가 justify-items:legacy인 경우만 상속함. 이는 HTML의 <center> 요소와 align 속성의 레거시 정렬 동작을 구현 위해 존재함. (기본값)
normal
레이아웃 컨텍스트에 따라 다르지만, 'stretch' 속성과 효과와 유사.
stretch
인라인 크기 설정 안 된 경우, 부분단위 채우기 위해 아이템 너비 늘어남.
positional alignment
부분집합 내 아이템의 위치값 지정. (가능값 종류)
center - 가운데에 배치start - 시작에 배치end - 끝에 배치left - 왼쪽에 배치right -오른쪽에 배치flex-start - 시작에 배치flex-end - 끝에 배치self-start - 시작에 배치self-end - 끝에 배치
overflow-alignment
아이템이 부분단위를 오버플로 시 정렬 방법 지정. (가능값 종류)
safe - 아이템이 오버플로 시, 아이템 정렬을 'start'로 설정. unsafe - 아이템 오버플로 여부에 관계없이 정렬값 유지.
baseline alignment
부모요소 기준선에 맞춰 정렬됨. (예) last baseline
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
justify-items 예제 - 개별 아이템에 justify-self: right; 설정된 경우
※ 아이템에 justify-self 속성하면, 특정 아이템만 부분단위 정렬 가능.
<style>
#container {
width: 50%;
aspect-ratio: 2/1;
border: 1px solid gray;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: end;
}
#container > div {
border: 1px solid black;
}
.a { background-color: coral; width: 40%;}
.b { background-color: lightblue; width: 50%;}
.c { background-color: lightgreen; width: 60%; justify-self : left;
</style>
<div id="container">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="a">4</div>
</div>
결과보기
justify-items 예제 - 개별 아이템에 position: absolute; 설정된 경우
※ 아이템에 postion:absolute 적용해 개별 아이템의 위치 설정 가능.
<style>
#container {
width: 200px;
aspect-ratio: 2/3;
border: 1px solid gray;
display: grid;
position: relative;
justify-items: right;
}
#container > div {
border: 1px solid gray;
padding: 10px;
position : absolute;
}
.a {
background-color: red;
width: 40%;
top: 100px;
}
.b {
background-color: pink;
width: 50%;
}
.c {
background-color: green;
width: 60%;
top: 200px;
}
</style>
<div id="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
결과보기
justify-items 예제 - 컨테이너에 writing-mode: vertical-rl; 설정된 경우
※ writing-mode 속성에 vertical-* 속성값 적용 시 블락방향이 바뀜.
<style>
#container {
width: 50%;
aspect-ratio: 2/1;
border: 1px solid gray;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: end;
writing-mode : vertical-rl;
}
#container > div {
border: 1px solid gray;
}
.b {
background-color: pink;
inline-size: 60%;
}
.a {
background-color: red;
inline-size: 50%;
}
.c {
background-color: green;
inline-size: 70%;
}
</style>
<div id="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="a">a</div>
</div>
결과보기
justify-items 예제 - 컨테이너에 direction: rtl; 설정된 경우
<style>
#container {
width: 50%;
aspect-ratio: 2/1;
border: 1px solid gray;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: start;
direction: rtl;
}
#container > div {
border: 1px solid gray;
}
.a {
background-color: red;
width: 40%;
}
.b {
background-color: pink;
width: 50%;
}
.c {
background-color: green;
width: 60%;
}
</style>
<div id="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="a">a</div>
</div>
결과보기
