07. Flexbox
1. Flexbox
1) Flexbox 개념
1
2
3
4
5
6
7
8
9
10
11
12
✔ 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식
💡 Flexbox를 이용할 때 반드시 알아야 되는것
(1) Flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소
- item : 정렬을 적용할 요소
(flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있다)
(2) Flexbox의 축
- 중식축
- 교차축, 반대축
1
2
3
4
5
✔ item(내부요소)을 감싸는 요소의 형식을 flex로 변경
→ item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 된다
✔ item에 별도 height / width 가 지정되어 있지 않으면 item의 높이는 flex-container의 높이 / 너비와
같아지게 된다 (flex-container 정렬 방향에 따라 다르다)
2. Flex-속성
1) flex-direction
1
2
✔ flex-container 전용 속성
main axis의 방향과 시작 위치를 지정하는 속성
1
2
3
4
5
6
7
8
9
10
11
✔ 행 방향(가로, 기본값)
flex-direction : row;
✔ 행 방향(가로 + 순서 반대)
flex-direction : row-reverse;
✔ 행 방향(세로)
flex-direction : column;
✔ 행 방향(세로 + 순서 반대)
flex-direction : column-reverse;
2) flex-wrap
1
2
3
✔ 내부 item들을 포장하는 속성
item들이 강제로 한줄에 배치되게 할 것인지 flex-container가 줄어들면 한줄을 벗어나서 여러줄로 배치할
것인지를 지정
1
2
3
4
5
6
7
8
✔ item을 한줄로 배치 (기본값)
flex-wrap : nowrap;
✔ item을 여러 줄로 배치
flex-wrap : wrap;
✔ item을 여러 줄로 배치(뒤에서부터 배치)
flex-wrap : wrap-reverse;
3) flex-flow
1
✔ flex-container의 방향, 순서와 여러줄로 배치할지에 대한 여부를 한번에 설정하는 속성
1
2
✔ flex-direction + flex-wrap 모양
flex-flow : row-reverse wrap;
4) justify-content
1
✔ 내용을 조정하다 → main axis 방향으로 item(내용)의 정렬 방법을 조정함
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
✔ main axis 시작 지점을 기준으로 정렬함 (기본값)
justify-content : flex-start;
✔ main axis 끝 지점을 기준으로 정렬함
justify-content : flex-end;
✔ main axis 가운데 정렬
justify-content : center;
✔ item 주위에 main axis 방향 양쪽으로 일정한 크기에 공간을 추가
→ 양 끝은 조금, item 중간은 넓게 떨어져 있음
justify-content : space-around;
✔ item이 main axis 내에서 동일한 간격을 가지게 됨
justify-content : space-evenly;
✔ space evenly에서 양끝을 flex-container에 붙게 함
justify-content : space-between;
5) align-items
1
2
✔ item들을 cross axis(반대축, 교차축) 방향으로 정렬하는 방법을 지정하는 속성 item들의 너비 또는 높이를
cross axis 방향으로 늘려서 flex-container와 같은 크기를 가지도록 한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
✔ 조건 : item에 corss axis 방향의 크기 지정 속성이 없어야 한다
align-items : stretch;
✔ 축의 시작부분을 기준
align-items : flex-start;
✔ 축의 끝부분을 기준
align-items : flex-end;
✔ 축의 가운데 기준
align-items : center;
✔ item 내부 content가 모두 한줄에 배치될 수 있도록 item 요소를 cross axis로
움직이는 설정
align-items : baseline;
6) align-content
1
2
3
✔ cross axis 방향으로 item이 포장된(wrap)라인을 정렬하는 방법
조건 : flex-wrap 속성이 wrap 또는 wrap-reverse 일 때만 사용 가능
속성값 : justify-content의 속성 값을 전부 사용할 수 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
✔ cross axis 방향 시작 지점으로 포장된 item들을 정렬
align-content : flex-start;
✔ cross axis 방향 끝 지점으로 포장된 item들을 정렬
align-content : flex-end;
✔ cross axis 방향 가운데로 포장된 item들을 정렬
align-content : center;
✔ cross axis 방향으로 포장된 item들이 양쪽으로 일정한 공간을 나누어 정렬
align-content : space-around;
✔ cross axis 방향으로 포장된 item들이 동일한 크기의 공간을 나누어 정렬
align-content : space-evenly;
✔ cross axis 방향으로 포장된 item들이 동일한 크기의 공간을 나누어 정렬
단, 처음과 끝은 flex-container에 붙어있게 함
align-content : space-between;
3. item-속성
1) order
1
2
3
4
5
6
✔ flex-container 내부 item의 순서를 지정하는 속성
(기본값 0 / 정수 / 양수,음수 가능)
order : 1;
order : 2;
...
2) flex-grow
1
2
3
4
5
6
✔ item이 flex-container 내부에서 비어있는 공간을 매꿀수 있도록 지정된 비율에 맞게 팽창함
(기본값 0 → 팽창 X)
flex-grow : 1;
flex-grow : 2;
...
3) flex-shrink
1
2
3
4
5
6
✔ item이 수축하는 정도를 지정하는 속성
(기본값 1)
flex-shrink : 0;
flex-shrink : 1;
...
4) flex-basis
1
2
3
4
5
6
✔ item의 main axis 방향으로의 기본 점유율(크기)을 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
flex-basis : 150px;
flex-basis : 10%;
...
5) align-self
1
2
3
4
5
✔ 각각 item별로 cross axis 방향으로 정렬을 지정하는 속성
align-self : flex-start;
align-self : flex-end;
align-self : center;