아이템이 배치되는 축의 방향을 결정하는 옵션
아이템의 배열도 바뀐다
속성
row : 좌→우 배치
row-reverse : 우→좌 배치
column : 위→아래 배치
column-reverse : 아래→위 배치
줄넘김을 어떻게 처리할 지 설정한다
속성
nowrap : 좌→우 배치(기본값)
wrap : 우→좌 배치(b와 c가 오른쪽에 있다가 왼쪽 아래로 내려간다)
wrap-reverse : 위→아래 배치
start : 좌→우 배치(reverse가 먹히지 않는다! → end도 마찬가지)
flex-end : 우→좌 배치
center : 중앙 배치
space-between : 아이템들 사이에 균일한 간격을 만들어서 배치
space-around : 아이템들 둘레에 균일한 간격을 만들어서 배치
space-evenly : 아이템들 사이 및 양 끝에 균일한 간격을 만들어 배치
교차축을 기준으로 정렬한다(메인축이 column이라면 교차축은 row)
속성
stretch : 기본 배치
flex-start : 위를 기준으로 배치
flex-end : 아래를 기준으로 배치
center : 중앙을 기준으로 배치
baseline : 컨텐츠(텍스트)의 아래를 기준선으로 잡아서 배치
justify-content: center;
align-item: center;
flex-start : 전체가 위를 기준으로 공백 없이 배치된다(순서 안바뀜)
→ align-items: flex-start은 위 정렬하지만 align-content는 각 해당 칸의 위로 정렬된다.
flex-end : 아래를 기준으로 배치
center : 중앙을 기준으로 배치
space-between : 위 아래로 아이템들 사이에 균일한 간격을 만들어 배치
space-around : 아이템들의 둘레에 균일한 간격을 만들어 배치
space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 배치
<div class="flex-container jc1">
<div class="flex-item item1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="flex-item item1">bbbbbbb</div>
<div class="flex-item item1">ccccccccc</div>
</div>
<div class="flex-container jc2">
<div class="flex-item item2">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="flex-item item2">bbbbbbb</div>
<div class="flex-item item2">ccccccccc</div>
</div>
<div class="flex-container jc3">
<div class="flex-item item3">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="flex-item item3">bbbbbbb</div>
<div class="flex-item item3">ccccccccc</div>
</div>
.flex-item.item1 {
flex-basis: 200px;
}
.flex-item.item2 {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex-item.item3 {
min-width: 200px;
max-width: 400px;
width: 200px;
flex-basis: 200px;
}
→ 가로축을 고정시키고 싶을 때는 flex-basis써도 되지만 맨 위처럼 될 수 있으므로 width를 쓰는것도 하나의 방법이다.
→ width가 flex-basis보다 우선순위가 높다.
→ min,max-width가 width, flex-basis 보다 우선권을 가진다.
<div class="flex-container">
<div class="flex-item">aaaaaaaaaaaaaa</div>
<div class="flex-item">bbbbbbb</div>
<div class="flex-item">ccccccccc</div>
</div>
.flex-container {
display: flex;
}
.flex-item:nth-child(1) {
flex-grow: 1;
}
→ flex-grow가 하나만 있으면 flex-grow가 있는 속이 공백을 다 가져간다
.flex-item {
flex-grow: 1;
}
→ 컨텐츠를 제외한 공백을 1대 1대 1로 나눈다
.flex-item:nth-child(2) {
flex-grow: 3;
/* 1(a) : 3(b) : 1(c)
컨텐츠 제외!!!!!!!!!!!!!! 공백만!!!!!!!!!!*/
}
</style>
→ 1 : 3 : 1 과 같다(a : b : c)
→ flex-basis가 200px이고 flex-shrink가 2라면 2002=400(비율)
flex-basis가 200px이고 flex-shrink가 1이라면 2001=200(비율)
⇒ 400 : 200 = 2 : 1 (총 3)
줄어든 90px을 3 (2 + 1)으로 나누고(90/3=30) 각각 2와 1을 준다
2 → 30 2 = 60px / 1 → 30 1 = 30px
각 값을 flex-basis에서 뺀다(축소) ⇒ 200 - 60 = 140px / 200 - 30 = 170px
→ flex-basis가 200px이고 flex-shrink가 2라면 200*2=400(비율)
flex-basis가 100px이고 flex-shrink가 1이라면 100*1=100(비율)
⇒ 400 : 100 = 4 : 1 (총 5)
줄어든 90px을 5 (4 + 1)으로 나누고(90/5=18) 각각 4와 1을 준다
4 → 18 4 = 72 / 1 → 18 1 = 18
각 값을 flex-basis에서 뺀다(축소) ⇒ 200 - 72 = 128px / 100 - 18 = 82px
<div class="flex-container">
<div class="flex-item item1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="flex-item item2">bbbbbbbbbbbbbbbbbbbbb</div>
<div class="flex-item item3">ccccccccccccccccccccccccccccccccccccccc</div>
</div>
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 300px;
}
.item1 {
flex-shrink: 1;
}
.item2 {
flex-shrink: 2;
}
.item3 {
flex-shrink: 1;
}
예시)
flex: 1;
= flex-grow: 1; flex-shrink: 1; flex-basis: 0%
flex: 1 1 0;
= flex : 1;
flex: 0 1 60%;
= flex-grow: 0; flex-shrink: 1; flex-basis: 60%
flex: 0 1 20%;
= flex-grow: 0; flex-shrink: 1; flex-basis: 20%
.flex-container {
display: flex;
height: 100vh;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">aaaaaaaaaaaaaaaaaa</div>
<div class="flex-item">bbbbbbbb</div>
<div class="flex-item">cccccccccccc</div>
</div>
.flex-container {
display: flex;
}
.flex-item:nth-child(1) {
order: 3;
}
.flex-item:nth-child(2) {
order: 1;
}
.flex-item:nth-child(3) {
order: 2;
}
→ b-c-a
<div class="flex-container">
<div class="flex-item">aaaaaaaaaaaaaaaaaa</div>
<div class="flex-item">bbbbbbbb</div>
<div class="flex-item">cccccccccccc</div>
</div>
.flex-container {
display: flex;
}
.flex-item {
opacity: 0.8;
}
.flex-item:nth-child(1) {
transform: scale(1.5);
z-index: 2;
}
.flex-item:nth-child(2) {
transform: scale(2);
z-index: 3;
}
.flex-item:nth-child(3) {
transform: scale(2.2);
z-index: 1;
}