🤔 flex-basis, flex-grow, flex-shrink

CSS의 flex-box 레이아웃을 사용할 때 유용한 세 가지 속성 flex-basis, flex-grow, flex-shrink

---

🪐flex-basis

• flex 요소의 초기 기본 크기를 설정하는 속성
  flex-direction이 row일 때는 width를 설정, column일 때는 height를 설정
• 요소의 초기 크기를 지정하며, flex-grow와 flex-shrink에 의해 조정될 수 있다.
• 값은 길이(length), 퍼센트(percentage) 등이 가능하며, 기본값은 auto이다.

flex-basis: 200px;
flex-basis: 50%;

- flex-basis: auto;를 설정하면 요소의 컨텐츠 크기 또는 길이가 요소의 초기 크기
- flex-basis: content;를 설정하면 요소의 컨텐츠 크기가 요소의 초기 크기

🪐flex-grow

• 요소가 가용 공간을 확장할 수 있는 정도를 결정하는 속성
• 값은 숫자이다. 0보다 큰 값을 가질 수 있으며, 기본값은 0이다.
• 부모 컨테이너에서 남는 공간이 있을 때, 각 자식 요소가 얼마나 늘어날지를 결정한다. 값이 클수록 해당 요소가 더 많이 늘어난다.

각 자식 요소의 flex-grow 값에 따라 해당 요소가 부모 컨테이너의 가용 공간을 차지하는 비율이 결정된다.

.container {
  display: flex;
}

.child_A {
  flex-grow: 1; /* 모든 자식 요소가 동일한 공간을 차지 */
}

.child_B {
  flex-grow: 2; /* 해당 요소가 더 많은 공간을 차지 */
}

=> 자식 요소 child_A와 child_B의 flex-grow 값이 각각 1과 2일 경우, child_B는 child_A보다 두 배 더 많은 공간을 확장

🪐flex-shrink

• 요소가 가용 공간을 줄일 수 있는 정도를 결정하는 속성
• 값은 숫자이다. 0보다 크거나 같은 값을 가질 수 있으며, 기본값은 1이다.
• 부모 컨테이너에서 공간이 부족할 때, 각 자식 요소가 얼마나 축소될지를 결정한다. 값이 클수록 해당 요소가 더 많이 축소된다.

부모 Flex 컨테이너의 너비가 충분하게 크면 모든 자식 요소는 원래 크기를 유지할 수 있다. 그러나 부모 컨테이너의 너비가 작을 경우, flex-shrink 속성을 사용하여 각 요소가 얼마나 축소될지를 지정한다.

.container {
  display: flex;
}

.child_A {
  flex-shrink: 1; /* 모든 자식 요소가 동일한 비율로 축소 */
}

.child_B {
  flex-shrink: 2; /* 해당 요소가 더 많이 축소 */
}

=> 자식 요소 child_A와 child_B의 flex-shrink 값이 각각 1과 2일 경우, child_B는 child_A보다 두 배 더 많이 축소