CSS Flex 설명

CSS Flexbox(Flexible Box Layout) 상세 설명

CSS Flexbox는 효율적인 레이아웃 설계를 지원하는 강력한 도구입니다. Flexbox를 통해 다양한 요소를 유연하게 배치하고 정렬할 수 있으며, 특히 복잡한 화면에서도 간결하고 직관적인 코드를 유지할 수 있습니다. 아래는 각 개념과 속성에 대한 상세 설명입니다.

---

1. Flexbox의 주요 개념

1.1 축(Axis)

Flexbox의 동작은 축(Axis)을 기반으로 합니다.

1. 주 축(Main Axis): flex-direction 속성에 의해 결정되며, 요소가 배치되는 주요 방향입니다.
   • 기본값: row (왼쪽에서 오른쪽).
2. 교차 축(Cross Axis): 주 축에 수직인 방향으로, 기본적으로 위에서 아래로 설정됩니다.

flex-direction 값	주 축 방향	교차 축 방향
row	가로 (좌→우)	세로 (위→아래)
row-reverse	가로 (우→좌)	세로 (위→아래)
column	세로 (위→아래)	가로 (좌→우)
column-reverse	세로 (아래→위)	가로 (좌→우)

---

1.2 정렬 메커니즘

Flexbox는 두 가지 축에서 정렬을 제어합니다.

• 주 축 정렬: justify-content 속성으로 제어.
• 교차 축 정렬: align-items 또는 align-self 속성으로 제어.

---

2. Flex Container의 속성 상세 설명

2.1 display

• display: flex: 컨테이너를 블록 요소로 설정하고 Flexbox 레이아웃 활성화.
• display: inline-flex: 컨테이너를 인라인 요소로 설정하고 Flexbox 레이아웃 활성화.

---

2.2 flex-direction

주 축의 방향을 설정하는 속성.

값	설명
row	가로 방향, 왼쪽에서 오른쪽. (기본값)
row-reverse	가로 방향, 오른쪽에서 왼쪽.
column	세로 방향, 위에서 아래.
column-reverse	세로 방향, 아래에서 위.

---

2.3 flex-wrap

Flex 아이템이 컨테이너 크기를 초과할 경우 줄바꿈 여부를 제어.

값	설명
nowrap	한 줄에 모든 아이템 배치. (기본값)
wrap	필요한 경우 아이템 줄바꿈.
wrap-reverse	줄바꿈을 반대 방향으로 진행.

 

---

2.4 justify-content

주 축에서 아이템의 정렬을 설정.

값	설명
flex-start	아이템을 주 축의 시작 지점에 배치. (기본값)
flex-end	아이템을 주 축의 끝 지점에 배치.
center	아이템을 주 축의 중앙에 배치.
space-between	첫 번째와 마지막 아이템은 양 끝, 나머지는 균등 간격 배치.
space-around	아이템 사이와 양 끝에 동일한 간격 부여.
space-evenly	아이템과 양 끝 간격을 동일하게.

---

2.5 align-items

교차 축에서 아이템의 정렬을 설정.

값	설명
flex-start	교차 축의 시작 지점에 정렬.
flex-end	교차 축의 끝 지점에 정렬.
center	교차 축의 중앙에 정렬.
baseline	텍스트 기준선에 맞춰 정렬.
stretch	아이템을 교차 축에 맞춰 늘림. (기본값)

---

2.6 align-content

여러 줄의 아이템을 교차 축에서 정렬 (한 줄에서는 효과 없음).

값	설명
flex-start	줄을 교차 축의 시작 지점에 배치.
flex-end	줄을 교차 축의 끝 지점에 배치.
center	줄을 교차 축의 중앙에 배치.
space-between	줄 사이를 균등 간격으로 배치.
space-around	줄 사이와 양 끝에 동일한 간격 부여.
stretch	줄을 교차 축에 맞춰 늘림. (기본값)

---

3. Flex Item의 속성 상세 설명

3.1 order

아이템의 표시 순서를 제어.

값	설명
음수	더 먼저 배치됨.
0	기본값. 순서를 변경하지 않음.
양수	나중에 배치됨.

---

3.2 flex-grow

컨테이너의 여유 공간을 아이템이 차지할 비율을 설정.

값	설명
0	여유 공간을 차지하지 않음.
양수	아이템이 차지할 비율.

예: flex-grow: 2 → 여유 공간에서 다른 아이템보다 2배 더 차지.

---

3.3 flex-shrink

컨테이너가 줄어들 때 아이템이 줄어드는 비율을 설정.

값	설명
0	크기를 줄이지 않음.
양수	아이템이 줄어드는 비율.

---

3.4 flex-basis

아이템의 기본 크기를 설정.

값	설명
auto	콘텐츠 크기 또는 width 사용.
고정 값	px, %, em 등 단위 지정.

---

3.5 align-self

개별 아이템의 교차 축 정렬을 설정 (컨테이너의 align-items를 무시).

값	설명
auto	부모 컨테이너의 align-items 값 상속.
flex-start	교차 축의 시작 지점에 정렬.
flex-end	교차 축의 끝 지점에 정렬.
center	교차 축의 중앙에 정렬.
baseline	텍스트 기준선에 맞춰 정렬.
stretch	교차 축에 맞춰 아이템을 늘림.

---

4. Flexbox 활용 예제

기본 예제

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 200px;
    border: 1px solid #ddd;
  }

  .item {
    flex: 1; /* 동일한 비율로 크기 분배 */
    margin: 10px;
    padding: 20px;
    text-align: center;
    background-color: #f0f0f0;
  }
</style>