[CSS] 플렉스 축약 속성 📝

 📝 예시)

flex: 0 1 calc(25% - 40px);

---

🛠️ 개념 설명

플렉스 아이템의 유연성을 한 번에 설정하는 단축 속성.
flex-grow, flex-shrink, flex-basis를 조합해 레이아웃을 효율적으로 제어합니다.

---

📜 속성 구조

flex: [flex-grow] [flex-shrink] [flex-basis];

1. flex-grow: 0
   • 역할: 남은 공간을 차지하지 않음
   • 0 → 초기 크기 유지 (확장 X)
2. flex-shrink: 1
   • 역할: 공간 부족 시 크기 감소 가능
   • 1 → 기본값으로 비율에 따라 축소
3. flex-basis: calc(25% - 40px)
   • 역할: 초기 크기 설정 (컨테이너 너비의 25% - 40px)
   • calc() 함수로 혼합 계산 가능

---

🧮 실제 계산 예시

• 컨테이너 너비: 800px
• 계산식: 25% of 800px - 40px = 200px - 40px = 160px
• 결과: 각 아이템 160px 너비 (4개일 경우, 160px + 여백 등 스타일에 따라 레이아웃 결정)

---

⚙️ 기본값 비교

flex 값	실제 의미
flex: 1	1 1 0 → 공간 차지 + 축소 가능
flex: 0 0 auto	0 0 auto → 크기 고정, 조절 없음
flex: 1 0 auto	1 0 auto → 공간 차지, 축소 불가

---

🌟 활용 

• 카드 레이아웃: 4개 카드 가로 배치 시, 각 카드 너비 25% - 40px으로 고정
• 상품 목록: 간격이 있는 그리드 레이아웃 구성
• 반응형 디자인: 축소 시 유연한 크기 조정

---

💡 주의사항

• flex-basis는 주 축을 따라 적용 (기본: row → 너비, column → 높이)
• calc() 내 단위 혼용 시 공백 필수 (예: calc(25% - 40px))

---