[CSS] Flexbox

Flexbox

display: flex

부모 박스 요소에 적용해서 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다.

Flexbox 속성들을 활용하면 요소의 정렬, 차지하는 공간을 설정해줄 수 있습니다.

부모 요소에 적용해야하는 Flexbox 속성들

1. flex-direction

   • 자식 요소들을 정렬할 정렬 축을 정합니다.
   • 기본 설정은 가로 정렬입니다.
   • row(기본값), column(위에서 아래로), row-reverse(오른쪽에서 왼쪽으로), column-reverse(아래에서 위로)

2. flex-wrap

   • 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈 할 것인지 정합니다.
   • 기본 설정은 줄 바꿈을 하지 않습니다. (nowrap)
   • nowrap(기본값), wrap(넘칠 경우 줄 바꿈), wrap-reverse(아래에서부터 채우기)

3. justify-content

   • 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.
   • 요소들이 가로로 정렬되어있다면 가로 방향으론 어떻게 정렬할 것인지 세로로 정렬되어있다면 세로 방향으론 어떻게 정렬할 것인지 정합니다.
   • flex-start, flex-end, center, space-between, space-around

4. align-items
   - 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.
   - justify-content와는 다르게 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.
   - stretch, flex-start, flex-end, center, base-line
   
   

자식 요소에 적용해야 하는 Flexbox 속성들

flex: grow shrink basis

• grow(팽창 지수): 요소 크기 증가
• shrink(수축 지수): 요소 크기 감소
• basis(기본 크기): 크기가 늘어나거나 줄어드는 것과는 상관없이 기본크기가 얼마인지 설정
• 기본 설정은 flex: 0 1 auto;
• flex-grow, flex-shrink, flex-basis 각각 따로 지정해줄 수도 있습니다.
  
  

grow
정렬축 방향으로 빈 공간이 있으면 설정한 숫자에 따라 빈 공간을 나누어서 차지하는 것입니다.
1, 2, 3의 박스가 있을 때, 1의 grow가 1이고 나머지가 0이라면 1박스가 남는 공간을 전부 차지합니다.
1과 2의 grow가 1이고, 3이 0이라면 1과 2가 1:1비율로 공간을 나누어 가집니다.
전부 grow가 1이라면 세 박스가 1:1:1 비율로 공간을 나누어 가집니다.

shrink
grow와 반대로 설정한 비율만큼 박스 크기가 작아집니다.
그러나 웬만하면 grow속성을 통해 변화를 주는 것이 낫습니다.
왜냐하면 shrink속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 힘들어지기 때문입니다.

basis
자식 요소가 grow나 shrink에 의해 변화되기 전의 기본 크기입니다.
flex-grow가 0일 때, basis 크기를 지정하면 basis로 지정한 크기는 유지됩니다.
flex-grow가 양수라면 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수 있습니다.
basis가 0이라면 정해진 비율이 고정이 됩니다.
basis가 auto라면 내부 컨텐츠의 크기에 따라 비율이 변할 수 있습니다.

flex-basis와 width
두 속성을 200px로 설정한 경우 기본 설정에서는 똑같이 나오지만 정렬 축 방향이 변한다면 flex-basis쪽은 꽉 차게 되고, width쪽은 그대로입니다.
처음으로 되돌아간 상태에서 이미지를 300px을 삽입하면 flex-basis는 이미지가 꽉차지만 크기는 이미지에 맞춰서 변하는 반면 width쪽은 이미지가 넘치게 됩니다.
→ flex-basis가 좀 더 유연하게 작동합니다.