쉽게 배우는 Flex 속성 튜토리얼

 

쉽게 배우는 Flex 속성 튜토리얼

 

flex-direction : 내부 요소들의 방향 설정

1)row : 가로

2)row-reverse : 가로 역순

3)column : 세로

4)column-reverse : 세로 역순

---

flex-wrap : 줄바꿈 

1)nowrap : 줄바꿈 없음

2)wrap : 줄바꿈 있음

3)wrap-reverse : 역순으로 줄바꿈

---

align-items : 내부 요소의 세로 위치 설정 

1)flex-start : 위쪽 정렬

2)flex-end : 아래쪽 정렬

3)center : 중앙 정렬

4)baseline : 개개인 크기에 맞춰

5)stretch : 꽉차게

---

justify-content : 가로 정렬

1)flex-start : 앞쪽 정렬

2)flex-end : 끝쪽 정렬

3)center : 중앙 정렬

4)space-between : 균등하게 여백 설정 (양끝 여백 없음)

5)space-around : 균등하게 여백 설정 (양끝 여백 있음)

 

 

---

align-content : 세로 정렬

1)flex-start : 앞쪽 정렬

2)flex-end : 끝쪽 정렬

3)center : 중앙 정렬

4)space-between : 균등하게 여백 설정 (양끝 여백 없음)

5)space-around : 균등하게 여백 설정 (양끝 여백 있음)

6)stretch : 꽉차게(높이가 일정해짐)