Flex Items property

플렉스박스 컨테이너(부모)의 설정을 마쳤다면, 이제 그 안에 담긴 개별 요소(자식)들의 행동을 제어하는 Flex Items 속성들에 대해 알아보겠습니다.

이 속성들은 컨테이너의 규칙 안에서 각 아이템이 얼마나 공간을 차지할지, 어떤 순서로 배치될지를 결정하는 세밀한 도구들입니다.

---

1. flex-grow (팽창 지수)

아이템이 컨테이너 내부의 남는 여백을 얼마나 가져갈지 결정합니다.

• 기본값: 0 (여백이 있어도 커지지 않음)
• 설명: 숫자가 클수록 더 많은 여백을 할당받습니다. 예를 들어 A 아이템이 1, B 아이템이 2라면 B는 A보다 2배 많은 여백을 가져갑니다.

---

2. flex-shrink (수축 지수)

컨테이너 공간이 부족할 때 아이템이 얼마나 줄어들지 결정합니다.

• 기본값: 1 (공간이 부족하면 자동으로 줄어듦)
• 설명: 0으로 설정하면 공간이 아무리 좁아져도 원본 크기를 유지하며 삐져나갑니다.

---

3. flex-basis (기본 크기)

아이템의 기본적인 크기를 설정합니다.

• 기본값: auto (콘텐츠 자체의 크기)
• 설명: width와 비슷하지만, 플렉스 방향(flex-direction)이 세로일 때는 높이(height)를 의미하게 됩니다. px, % 등의 단위로 고정 크기를 줄 수 있습니다.

---

4. flex (축약형 속성)

위의 세 가지 속성(grow, shrink, basis)을 한 번에 쓰는 권장 방식입니다.

• 문법: flex: [grow] [shrink] [basis];
• 예시: flex: 1 1 200px; (여백을 채우고, 부족하면 줄어들며, 기본 200px을 유지함)

---

5. order (배치 순서)

HTML 코드 순서와 상관없이 시각적인 배치 순서를 바꿉니다.

• 기본값: 0
• 설명: 숫자가 작을수록 앞에 배치됩니다. (음수 가능)

---

6. align-self (개별 수직 정렬)

부모의 align-items 설정을 무시하고 해당 아이템만 따로 수직 정렬을 하고 싶을 때 사용합니다.

• 주요 값: flex-start, flex-end, center, baseline, stretch

---

🖥️ 실전 예제 코드: "특별한 아이템 만들기"

HTML

 

<style>
  .container {
    display: flex;
    height: 100px;
    background-color: #eee;
  }

  .item {
    background-color: #3498db;
    color: white;
    margin: 5px;
    padding: 10px;
  }

  /* 두 번째 아이템만 여백을 다 채우도록 설정 */
  .item:nth-child(2) {
    flex-grow: 1;
    background-color: #e74c3c;
  }

  /* 세 번째 아이템만 아래쪽에 붙이기 */
  .item:nth-child(3) {
    align-self: flex-end;
  }

  /* 네 번째 아이템을 맨 앞으로 보내기 */
  .item:nth-child(4) {
    order: -1;
  }
</style>

<div class="container">
  <div class="item">1번</div>
  <div class="item">2번(Grow)</div>
  <div class="item">3번(Self-End)</div>
  <div class="item">4번(Order-1)</div>
</div>

---

📋 Flex Items 주요 속성 요약표

속성	설명	기본값
flex-grow	남는 여백을 채우는 비율	0
flex-shrink	부족할 때 줄어드는 비율	1
flex-basis	요소의 기본 크기 지정	auto
flex	위 세 속성의 축약형	0 1 auto
order	아이템의 나열 순서	0
align-self	개별 아이템의 수직 정렬	auto

---

학습 정리

• **flex: 1;**이라고만 적으면 **flex: 1 1 0;**과 같은 의미로, 모든 공간을 균등하게 나눠 갖는 레이아웃을 만들 때 자주 쓰입니다.
• **order**는 시각적인 순서만 바꿀 뿐, 스크린 리더가 읽는 순서나 탭 키 이동 순서는 바꾸지 않으니 주의해야 합니다.
• **align-self**는 부모에게 속박받지 않는 자유로운 정렬을 가능하게 합니다.

---

플렉스박스의 자식 요소들까지 세밀하게 제어하는 방법을 정복하셨습니다!

---