[CSS] flex 기억 안나는 것들 정리

• tailwindcss를 사용하면서 flex-grow, shrink 등 사용하지만 막상 어떤 것인지 생각나지 않아서 이 기회에 한 번 정리해보고자 한다.

flex-grow

• grow는 해당 요소가 Flexbox 레이아웃 안에서 남는 공간을 차지하게 만든다.

flex-grow: 1; // grow 요소가 가능한 한 남는 공간을 차지함
flex-grow: 0; // grow-0 요소가 남는 공간을 전혀 차지하지 않음(default)

[ grow - 남는 공간 차지할 때 ]

<div class="flex">
  <div class="bg-red-500">고정 너비</div>
  <div class="grow bg-green-500">남는 공간을 채움</div>
</div>

[ grow-0 - 남는 공간 차지하지 않을 때 ]

<div class="flex">
  <div class="bg-red-500">고정 너비</div>
  <div class="grow-0 bg-green-500">남는 공간을 채움</div>
</div>

flex-shrink

• 컨테이너 공간이 부족할 때 항목이 줄어드는 비율을 설정한다.
• default : 1(공간이 부족하면 줄어들 수 있음)
• 0 : 줄어들지 않음(항상 원래 너비 유지)

<div class="flex w-40">
  <div class="shrink-0 w-32 bg-red-500">A</div>
  <div class="w-32 bg-blue-500">B</div>
</div>

• w-40 : 160px인데, 각 두 요소가 128px이나 사진 상으로는 A는 줄지 않고, B는 줄어든다.

flex-basis

• Flex 항목의 초기 크기(기본 크기)를 설정. Flexbox 내부에서만 작동

<div class="flex">
  <div class="basis-1/3 bg-green-500">33%</div>
  <div class="basis-2/3 bg-yellow-500">66%</div>
</div>

이외

• 번외로 gap은 Flexbox나 Grid 레이아웃에서 자식 요소 간의 간격을 설정할 때 사용한다.

• CSS를 직접 쓰는 경우
  flex: [flex-grow] [flex-shrink] [flex-basis];

flex: 1 1 0%;  /* grow: 1, shrink: 1, basis: 0% */

• 여러가지 필요한 경우가 있으면 gpt와 함께 찾아보자