👍flex
- 레이아웃을 좀 더 편리하게 배치시키기 위한 기능
- 유연한 배치를 지원한다.
- 반응형 웹 개발 시 거의 준필수로 사용된다.
구성요소
- (Flex) Container : Item 을 감싸는 큰 컨테이너(박스)
- (Flex) Item : Container안에 속하는 Item(박스)
float와 flex
- flex는 높이가 다른 요소와 맞춰진다는 차이점이 있다.
👍Flex Container
- Container에 Flex 속성을 입힌다.
- display속성
flex : 지정한 크기만큼 x축과 y축으로 이동한다.
inline-flex : 지정한 크기만큼 x축으로 이동한다.(flex-conteiner 자체가 inline-block이 된다)
flex-direction
-
아이템이 배치되는 축의 방향을 결정하는 옵션
-
아이템의 배열도 바뀐다
-
속성
row : 좌→우 배치
row-reverse : 우→좌 배치
column : 위→아래 배치
column-reverse : 아래→위 배치
flex-wrap
-
줄넘김을 어떻게 처리할 지 설정한다
-
속성
nowrap : 좌→우 배치(기본값)
wrap : 우→좌 배치(b와 c가 오른쪽에 있다가 왼쪽 아래로 내려간다)
wrap-reverse : 위→아래 배치
justify-content
- 메인축을 기준으로 정렬한다(메인축이 row라면 교차축은 column)
- flex-direction은 순서도 바뀌지만 justify-content는 순서는 바뀌지 않는다
- 속성
start : 좌→우 배치(reverse가 먹히지 않는다! → end도 마찬가지)
flex-end : 우→좌 배치
center : 중앙 배치
space-between : 아이템들 사이에 균일한 간격을 만들어서 배치
space-around : 아이템들 둘레에 균일한 간격을 만들어서 배치
space-evenly : 아이템들 사이 및 양 끝에 균일한 간격을 만들어 배치
align-items
-
교차축을 기준으로 정렬한다(메인축이 column이라면 교차축은 row)
-
속성
stretch : 기본 배치
flex-start : 위를 기준으로 배치
flex-end : 아래를 기준으로 배치
center : 중앙을 기준으로 배치
baseline : 컨텐츠(텍스트)의 아래를 기준선으로 잡아서 배치
gap
- 아이템 간에 간격을 준다.
- 가로 간격과 세로 간격을 다르게 줄 수 있다.(ex: 1em 0)
아이템을 한 가운데 놓기
justify-content: center;
align-item: center;
align-content
- 여러 행 정렬 옵션
- flex-wrap: wrap; 이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 시 수직축 방향 정렬을 결정하는 속성이다.
- 속성
stretch : 기본 배치
flex-start : 전체가 위를 기준으로 공백 없이 배치된다(순서 안바뀜)
→ align-items: flex-start은 위 정렬하지만 align-content는 각 해당 칸의 위로 정렬된다.
flex-end : 아래를 기준으로 배치
center : 중앙을 기준으로 배치
space-between : 위 아래로 아이템들 사이에 균일한 간격을 만들어 배치
space-around : 아이템들의 둘레에 균일한 간격을 만들어 배치
space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 배치
👍Flex Item
flex-basis
- flex 아이템의 기본 크기를 설정한다
- flex-direction이 row일 때는 너비, column일 때는 높이
- 컨텐츠가 flex-basis를 넘어갈 경우 컨텐츠 크기에 맞춰 적용된다
- 값 : px, em, rem, %
- 기본값 : auto
<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 보다 우선권을 가진다.
flex-grow
- flex 아이템을 컨테이너 크기에 맞춰서 확장한다
→ 전체 공간이 남을 때! - 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다
- 기본값은 0
<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-shirnk
- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다
→ 전체 공간이 부족할 때! - 아이템의 감소 너비 비율을 설정한다
- 기본값은 1
→ 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
- flex : (flex-grow)
- flex : (flex-grow), (flex basis)
- flex : (flex-grow), (flex-shrink), (flex basis)
예시)
- flex : flex-grow, flex-shrink, flex-basis
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%
align-self
- 아이템을 수직축으로 정렬한다.
- align-items, align-content보다 우선순위가 높다.
- 속성은 align-items와 동일하다.
.flex-container {
display: flex;
height: 100vh;
align-items: center;
}- align-self: auto;
- align-self: flex-start;
- align-self: flex-end;
- align-self: stretch;
order
- 아이템의 배치 순서를 바꾼다.
- Item에 숫자를 지정하고 숫자가 클수록 순서가 뒤로 간다.
<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
z-index
- position에서의 z-index와 동일하다.
<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;
}
