CSS - 레이아웃 스타일(Flexbox)

 

 

 

 

레이아웃 스타일(Flexbox)

 

• flex-direction
• flex-wrap
• justify-content
• align-items

 

 

 

 

 

 

 

 

display : flex

 

• 부모 요소에 display : flex 추가 시 수평 정렬

 

 

---

 

flex-direction

 

• row-reverse : 오른쪽에서 왼쪽으로
• column : 위에서 아래로
• column-reverse : 아래에서 위로
• row : 왼쪽에서 오른쪽으로

 

row-reverse

row

column, column-reverse

---

 

flex-wrap

 

• nowrap : 줄 바꿈 하지 않음
• wrap-reverse : 줄 바꿈이 일어남, 아래에서 위로
• wrap : 줄 바꿈이 일어남, 위에서 아래로

 

nowrap

wrap-reverse

wrap

---

 

justify-content

 

• flex-end : 오른쪽 맞춤
• center : 가운데 맞춤
• space-between : 양쪽 끝에 붙이고 균등하게 맞춤
• space-around : 균등하게 맞춤
• flex-start : 왼쪽 맞춤

 

flex-end

center

space-between

space-around

flex-start

---

 

align-items

 

• stretch : 부모 요소의 높이 or 콘텐츠가 많은 자식 요소 높이에 맞춤
• flex-start : 부모 요소 윗부분 배치
• flex-end : 부모 요소 아랫부분 배치
• center : 중앙 배치

 

stretch

flex-start, flex-end, center