[CSS] flex

🔗 CSS에서 flex란?

 

 

 box와 item 등을 행 또는 열로 자유자재로 배치시킬 수 있는 CSS 속성이다.

 

---

 

display: flex;

 

flex-direction : 주축 방향 설정

· row : 가로축 →  default

· row-reverse : 가로축(역방향) ←

· column : 세로축 ↓

· column-reverse : 세로축(역방향) ↑

 

flex-wrap : 줄바꿈 설정

· nowrap : 줄바꿈 X (1행에 모두 배치 => item width 자동으로 축소됨)  default

· wrap : 줄바꿈 O

· wrap-reverse : 줄바꿈 O (역방향)

 

▪ flex shorthand

flew-flow: flex-direction flex-wrap;

---

justify-content : 주축(main-axis) 정렬 설정 => 두 줄 이상 기준

· flex-start : 시작점 정렬  default

· flex-end : 끝점 정렬

· center : 가운데 정렬

· space-between : 시작점 정렬 / 동일 간격 정렬 / 끝점 정렬

· space-around : 동일 간격 정렬 (기준 X)

· space-evenly : 동일 간격 정렬

 

justify-items : 주축(main-axis) 정렬 설정 => items(한 줄) 기준

· flex-start : 시작점 정렬  default

· flex-end : 끝점 정렬

· center : 가운데 정렬

 

align-content : 교차축(cross-axis) 정렬 설정 => 두 줄 이상 기준

· stretch : 높이를 시작점 ~ 끝점으로 늘림  default

· flex-start : 시작점 정렬

· flex-end : 끝점 정렬

· center : 가운데 정렬

· space-between : 시작점 정렬 / 동일 간격 정렬 / 끝점 정렬

· space-around : 동일 간격 정렬 (기준 X)

 

align-items : 교차축(cross-axis) 정렬 설정 => items(한 줄) 기준

· stretch : 높이를 시작점 ~ 끝점으로 늘림  default

· flex-start : 시작점 정렬

· flex-end : 끝점 정렬

· center : 가운데 정렬

---

order : 우선 순위 설정 (작을수록 우선 순위 ↑)  default : 1

---

flex-grow : item 확장비 설정  default : 0

flex-shrink : item 수축비 설정 default : 1

flex-basis : item 너비 설정  default : auto

 

▪ flex shorthand

flex: flex-grow flex-shrink flex-basis;

 

 

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 정리