Flexbox: 정렬의 끝판왕.
"Float 공부하느라 고생했고 이제부터 Flexbox 쓰시면 되겠습니다."
4단계:
1. 플렉스박스 선언
display: flex;
- 기본적으로 block과 비슷하지만 block이 불가능한 기능을 가짐.
- inline-flex는 inline-block과 비슷하지만 불가능한 기능을 가짐.
- 정렬하고 싶은 요소의 "부모"에게 선언을 해야함.
2. 정렬 방향
flex-direction:
row(가로);
row-reverse(가로 역);
column(세로)
column-reverse(세로 역);
- 정렬을 하고자 하면 축Axis가 생김.
-- flex-direction이 어떤지에 따라 축의 방향이 달라짐. - flex-direction: Main axis / Main과 수직 방향: Cross axis
e.g.,row; | main axis: 좌-우, cross axis: 상-하
column;| main aixs: 상-하, cross axis: 좌-우
row-reverse;| main axis: 우-좌, cross axis: 상-하
column-reverse; | main axis: 하-상, cross axis: 좌-우
3. 무조건 한 줄 안에 다 정렬? 여러줄 정렬?
flex-wrap: nowrap;
- 자식의 사이즈를 줄여서라도 한 줄로 정렬해버림.
자식이 300 * 3이고, 부모가 600일 때 사용하면 자식이 200*3으로 돼버림. - 원래 사이즈를 유지하고 싶다면
flex-shrink: 0;을 사용
flex-wrap: wrap;
- 사이즈를 유지하고 여러 줄로 정렬,
- flex-line이 여러 개 생긴다.
- parent가 600*1000이고 child 가 300*200이 3개가 있다면 2줄이 만들어 질 것 (가로가 300*2 이기 때문.)
- 전체 세로 길이에서 남은 여백은 400일 것. (1000-200*3)
- flex-line 2줄로 이루어진 2개의 임의의 박스가 생긴다. = 1박스의 여백은 200일 것.
4. 플렉스박스 사용해 정렬!
- main-axis 기준으로 정렬:
justify-content - cross-axis 기준으로 정렬:
align-items/align-content
justify-content: flex-start; | flex-end; | center; | space-between; | space-around;
align-items: 위와 같음.
align-content는 flex-wrap: wrap; 이어야 의미있음.
- 배치의 flex 기준 선을 parent 전체로 본다.
일단 align-item로 만들고 그 다음에 align-content를 써본다.
- 개쩌는 기능
flexbox를 사용하면 markup된 것과 상관없이 순서를 바꿀 수 있음.
- 각각에게 order값을 주면 (e.g.,
order: 1; order: 2;...) 그 순서대로 정렬된다.
- 간혹가다 width값 미지정으로 달라붙는 경우가 있음.
flex-grow: 0; 플렉스 배치 후 남은 영역을 채우지 않음.
flex-grow: 1;: 플렉스 배치 후 남는 영역을 채움
