[CSS] Flexbox 속성 한눈에 정리하기

📌 Flex 기본 개념

Flexbox는 컨테이너(부모)와 아이템(자식)으로 구성된다.

.container {
  display: flex;  /* 이걸 선언해야 flex 속성들이 작동함 */
}

 

컨테이너에 display: flex를 주면, 자식 요소들이 가로 방향(row)으로 나란히 배치된다.

---

1️⃣ justify-content (가로 정렬)

요소들을 가로선(메인 축) 상에서 정렬한다.

값	설명
flex-start	왼쪽 정렬 (기본값)
flex-end	오른쪽 정렬
center	가운데 정렬
space-between	요소 사이에 동일한 간격
space-around	요소 주위에 동일한 간격
space-evenly	요소 사이와 양 끝 모두 동일한 간격

.container {
  justify-content: center;  /* 가로 가운데 정렬 */
}

 

space-between vs space-around vs space-evenly 차이

• space-between: 첫 번째와 마지막 요소는 양 끝에 붙음
• space-around: 각 요소 좌우에 같은 여백 (양 끝은 절반)
• space-evenly: 모든 간격이 완전히 동일

---

2️⃣ align-items (세로 정렬)

요소들을 세로선(교차 축) 상에서 정렬한다.

값	설명
flex-start	컨테이너 꼭대기에 정렬
flex-end	컨테이너 바닥에 정렬
center	세로 가운데 정렬
baseline	텍스트 기준선에 맞춰 정렬
stretch	컨테이너 높이에 맞게 늘림 (기본값)

.container {
  justify-content: center;  /* 가로 가운데 */
  align-items: center;      /* 세로 가운데 */
}
/* → 완벽한 정중앙 배치! */

---

3️⃣ flex-direction (방향 설정)

요소들이 어느 방향으로 배치될지 결정한다.

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

.container {
  flex-direction: column;
}

 

⚠️ 중요: flex-direction이 column이면 축이 뒤바뀐다!

• justify-content → 세로 정렬이 됨
• align-items → 가로 정렬이 됨

---

4️⃣ order (순서 변경)

개별 요소의 순서를 바꾼다. 기본값은 0이며, 숫자가 작을수록 앞에 배치된다.

.yellow {
  order: 1;  /* 다른 요소들(기본값 0)보다 뒤로 이동 */
}

 

왜 order: 1이면 뒤로 가는가?
모든 요소의 기본 order 값은 0이다. 특정 요소에 order: 1을 주면 0보다 크니까 맨 뒤로 밀려난다.

• order: -1 → 맨 앞으로
• order: 0  → 기본 위치
• order: 1  → 맨 뒤로

---

5️⃣ align-self (개별 세로 정렬)

개별 요소에만 다른 세로 정렬을 적용한다. align-items와 같은 값들을 사용한다.

.container {
  align-items: flex-start;  /* 전체는 위쪽 정렬 */
}

.yellow {
  align-self: flex-end;     /* 노란색만 아래쪽 정렬 */
}

---

6️⃣ flex-wrap (줄 바꿈)

요소들이 컨테이너를 넘칠 때 줄 바꿈 여부를 결정한다.

값	설명
nowrap	한 줄에 모두 배치 (기본값, 넘쳐도 줄 안 바꿈)
wrap	넘치면 다음 줄로
wrap-reverse	넘치면 위쪽으로 줄 바꿈

.container {
  flex-wrap: wrap;
}

---

7️⃣ flex-flow (단축 속성)

flex-direction과 flex-wrap을 한 번에 작성한다.

/* 따로 쓰면 */
flex-direction: row;
flex-wrap: wrap;

/* 합치면 */
flex-flow: row wrap;

---

8️⃣ align-content (여러 줄 정렬)

여러 줄이 있을 때, 줄들 사이의 세로 정렬을 결정한다.

값	설명
flex-start	줄들을 꼭대기에 정렬
flex-end	줄들을 바닥에 정렬
center	줄들을 세로 가운데 정렬
space-between	줄 사이에 동일한 간격
space-around	줄 주위에 동일한 간격
stretch	줄들을 컨테이너에 맞게 늘림

⚠️ 주의: flex-wrap: wrap으로 여러 줄이 생겼을 때만 효과가 있다. 한 줄이면 효과 없음!

 

align-items vs align-content

• align-items: 한 줄 안에서 요소들의 세로 정렬
• align-content: 여러 줄들 사이의 세로 간격/정렬

---

📋 속성 요약

속성	적용 대상	역할
justify-content	컨테이너	가로 정렬
align-items	컨테이너	세로 정렬 (한 줄)
align-content	컨테이너	세로 정렬 (여러 줄)
flex-direction	컨테이너	배치 방향
flex-wrap	컨테이너	줄 바꿈 여부
flex-flow	컨테이너	direction + wrap 단축
order	아이템	개별 순서 변경
align-self	아이템	개별 세로 정렬

 

참고자료 - 🔗 flex 개구리