1. flex box 안에서의 배치 방향 정하기
→ flex-direction:(row, column, row-reverse …)
2. flex box 안에서의 정렬 기준 정하기
justify-content:(기본 축 정렬)
1. flex-end(기본축 기준 맨 끝으로 정렬)
2. space-around(모든 요소의 양쪽 공간이 똑같게)
3. space-between(기본축 기준 양 끝을 늘어트림)
align-items:(교차 축 정렬)
1. center (등등)
교차 축 정렬을 하면 늘려서 꽉 채워지던 flex box 안 요소들이 원래 크기로 돌아감.
3. flex box 안에서 요소가 넘칠 때
flex-wrap: wrap;
- 넘치는 요소는 교차 축 방향으로 넘어가서 배치됨(다음 줄에 배치됨)
요소 간격 : gap;
1. gap: 30px 요소들 사이에 30픽셀씩 간격 생김(가로, 세로 다)
2. gap: 30px 0: 세로 30, 가로 0
요소 늘여서 꽉 채우기:
flex-grow: 1;
→ 요소를 늘려서 빈 공간을 꽉 채우고 싶을 때 사용
여기서 숫자는 상대적인 값이며, 기본 값은 0이다. 숫자에 비례하게 요소를 늘릴 수 있음
요소 줄여서 꽉 채우기(flex box보다 요소들의 크기가 더 클 때)
flex-shrink: 1
1. flex-box 크기에 맞게 줄어듦. 기본 값이 1이기 때문에 알아서 크기에 맞게 줄여듭니다.
2. flex-shrink 값을 0으로 하면 크기가 줄어들지 않고, flex-shrink 값을 2로 하면 1보다 많이 줄어듦.
즉, 요소의 크기를 고정하고 싶을 때는 flex-shrink: 0, 늘리고 줄이고 싶을 떄는 flex-shrink: 1을 쓰면 된다..!
flex-basis: 시작크기(이 이상 안늘어남)
양 끝 요소의 너비가 달라서 중앙 요소의 정렬이 이상하거나 할 때 양 끝 요소의 flex-basis를 똑같이 설정해주고, 오른쪽 끝 요소의 justify-content: flex-end 를 해주면 해결 가능하다.
