[CSS]Flex의 모든 것

❓ 정의

- Flexbox(Flexible Box)는 CSS의 1차원 레이아웃 방식으로, 컨테이너 내부의 아이템을 가로 또는 세로 방향으로 정렬하고 배치할 때 사용된다.

- 반응형 웹 디자인에 필수적인 기능이며, float이나 position을 사용하지 않고도 쉽게 정렬을 조정할 수 있다.

---

❗ 특징

✅ 부모와 자식 태그가 필요하고, 부모 요소(flex-container)와 자식 요소(flex-item)에 적용하는 속성이 구분되어 있다!

- 속성은  컨테이너의 직계자식까지만 영향을 준다는 특징이 있으니 주의해야 함!

- flex-container의 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content 등

- flex-item의 속성 : flex, flex-grow, flex-shrink, flex-basis, align-self, order, z-index 등

---

💠 종류

1️⃣ flex-direction

- flex container 내의 item들의 정렬 방향을 결정하는 속성

row와 row-reverse

column과 column-reverse

.container {
  flex-direction: row; /* 기본값: 가로 정렬 */
  flex-direction: row-reverse; /* 가로 방향 반대 정렬 */
  flex-direction: column; /* 세로 정렬 */
  flex-direction: column-reverse; /* 세로 방향 반대 정렬 */
}

---

2️⃣ justify-content

- 아이템을 가로축(or 세로축) 기준으로 정렬할 때 사용하는 속성

각각 flex-direction이 row와 col일 때의 flex-start

각각 flex-direction이 row와 col일 때의 flex-end

각각 flex-direction이 row와 col일 때의 center

space-between (아이템 간 간격 일정하게 컨테이너 꽉 채우기)

space-around (양 끝 컨테이너 간격은 아이템 간 간격의 1/2)

space-evenly (모든 간격 균등)

.container {
  justify-content: flex-start;  /* 기본값: 왼쪽 정렬 */
  justify-content: flex-end;    /* 오른쪽 정렬 */
  justify-content: center;      /* 중앙 정렬 */
  justify-content: space-between; /* 양 끝 정렬 (사이 간격 균등) */
  justify-content: space-around;  /* 요소 주변 간격 균등 */
  justify-content: space-evenly;  /* 요소 간격 균등 */
}

---

3️⃣ align-items

- 아이템을 교차 축(수직 방향) 기준으로 정렬할 때 사용하는 속성

-  한 줄을 기준으로 정렬

기본값: stretch (부모요소의 높이만큼 자식요소 높이가 같이 늘어남)

flex-start와 flex-end

center와 baseline

3에만 align-self 적용

.container {
  align-items: flex-start;  /* 위쪽 정렬 */
  align-items: flex-end;    /* 아래쪽 정렬 */
  align-items: center;      /* 중앙 정렬 */
  align-items: stretch;     /* 컨테이너 높이만큼 늘림 */
  align-items: baseline;    /* 텍스트 기준선 맞춤 */
}

.third_item {
    align-self: center;     /* 세 번째 아이템만 중앙 정렬 */
}

---

4️⃣ align-content

- 한 줄을 기준으로 정렬하는 align-items와 달리, align-content는 flex-wrap: wrap이 설정된 경우 두 줄부터 기준으로 정렬한다.

align-items와 align-content의 차이점

기본값: stretch (부모요소의 높이만큼 자식요소 높이가 같이 늘어남)

flex-start와 flex-end

center와 space-between

space-around와 space-evenly

.container {
  align-content: flex-start;  /* 기본값: 왼쪽 정렬 */
  align-content: flex-end;    /* 오른쪽 정렬 */
  align-content: center;      /* 중앙 정렬 */
  align-content: space-between; /* 양 끝 정렬 (사이 간격 균등) */
  align-content: space-around;  /* 요소 주변 간격 균등 */
  align-content: space-evenly;  /* 요소 간격 균등 */
}

---

5️⃣ flex-wrap

- 기본적으로 Flexbox는 한 줄(nowrap)로 배치되나, flex-wrap 속성을 이용해 여러 줄(wrap)로 만들 수 있다.

no-wrap (컨테이너의 넓이에 맞춰 아이템 넓이 자동 축소)

wrap(아이템의 넓이를 그대로 유지한 채로 다음줄로 이어서 정렬)

flex-direction이 row일 때와 col일 때의 wrap-reverse

.container {
  flex-wrap: nowrap; /* 기본값: 줄 바꿈 없음 */
  flex-wrap: wrap;   /* 줄 바꿈 가능 */
  flex-wrap: wrap-reverse; /* 줄 바꿈 반대 방향 */
}

---

6️⃣ flex-basis

- 아이템의 기본 크기를 지정해줄 수 있다.

- 기본적으로 flex-basis 속성이 width(또는 height) 값보다 우선하게 된다. 하지만, 똑같은 값을 flex-basis와 width(또는 height)에 주고 동시에 적용할 경우엔 width(또는 height)의 적용이 우선시된다.

+ 언어가 한글인지 영어인지와 word-break 등 다른 속성값에 따라 flex-basis는 예상과 다르게 동작할 수도 있다.

flex-basis 예시(왼쪽), word-wrap: break-word 속성을 준 예시(오른쪽)

.item {
  flex-basis: 200px; /* 기본 크기 */
}

---

7️⃣ flex-grow, flex-shrink

- 자식 요소인 flex-item이 차지하는 비율을 조절하는 속성

- grow(확장) <-> shrink(축소)

- 0 또는 양의 정수값으로 설정해야 한다.

+ flex-shrink 사용시 부모 컨테이너에 flex-wrap: wrap 속성이 부여된 경우엔 적용되지 않는다!

flex-grow 예시

flex-shrink 예시

.item {
  flex-grow: 1;   /* 남은 공간을 비율에 맞게 차지 */
  flex-shrink: 1; /* 줄어드는 비율 */
}

---

8️⃣ order

- 아이템 요소들의 순서를 결정하는 속성

- 기본값은 0이며, 음수와 양수 모두 사용 가능

- flex-direction 속성의 방향값을 기준으로 낮은 숫자를 먼저 배치 (값이 작을수록 우선순위 적용)

- 순서대로 배치하지 않고 order로 배치를 변경하는 이유는, 배치된대로 읽는 스크린 리더가 중요한 정보를 더 먼저 읽도록 할 수 있기 때문이다! 

.item:nth-child(1) {order: 2;} 
.item:nth-child(2) {order: 3;} 
.item:nth-child(3) {order: 1;}

참고: 알잘딱깔센 flex & grid (https://paullabworkspace.notion.site/flex-grid-e5bdea43ba4f427990ff8666ea53ec56)