display: flex 속성 완전정복 – 어떤 옵션이 무슨 역할을 할까?

 

이전 Flexbox 관련 포스팅에서는 Flexbox와 CSS Grid의 차이를 비교해보며
언제 어떤 레이아웃을 쓰는 게 좋은지 알아봤습니다.

이번엔 Flexbox 속성 하나하나에 대해 심화 학습을 시작해보려고 합니다.
“flex로 정렬은 하긴 하는데, 정확히 무슨 속성이 뭘 하는 거였더라?”
이런 고민이 있었다면 이번 flex 시리즈가 큰 도움이 될 거예요 :)

---

✅ display: flex, 다시 정리해보기

Flexbox의 핵심은 다음 두 가지로 나뉩니다:

• Flex 컨테이너: display: flex가 적용된 부모 요소
• Flex 아이템: 컨테이너 안에 있는 자식 요소들

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
  .container {
    display: flex;
  }
</style>

 

---

 

🧩 Flex 컨테이너에서 쓸 수 있는 주요 속성들

속성	기능 요약
flex-direction	주축 방향을 설정 (가로 또는 세로)
justify-content	주축 방향 정렬 방식 설정
align-items	교차축 정렬 방식 설정
flex-wrap	아이템 줄바꿈 여부 설정
gap	아이템 간 간격 설정

 

 

---

 

🧱 Flex 아이템에서 쓸 수 있는 주요 속성들

속성	기능 요약
flex-grow	여유 공간을 얼마나 더 차지할지
flex-shrink	공간이 부족할 때 얼마나 줄어들지
flex-basis	아이템의 기본 크기 설정
align-self	특정 아이템의 교차축 정렬 따로 설정

 

 

---

 

📚 속성 간 관계 미리 이해하기

• flex-direction에 따라 정렬 기준 방향이 바뀝니다.
• justify-content는 주축 방향 정렬
• align-items는 교차축 방향 정렬
• flex-wrap을 설정하면 한 줄에 안 들어가는 요소를 줄바꿈할 수 있습니다.
• 아이템마다 flex-grow나 flex-basis를 조절하면 비율 조절형 레이아웃도 만들 수 있어요.