[CSS] Flexbox Froggy

👀 Flexbox Froggy

Flexbox Froggy를 이용해서 CSS의 flex에 대해서 알아본다.

✔ 1-4. justify-content

justify-content를 사용해 아이템을 가로로 정렬한다.

• flex-start: 시작점으로 정렬
• flex-end: 끝점으로 정렬
• center: 가운데로 정렬
• space-between: 아이템 사이의 간격을 일정하게 정렬
• space-around: 여백과 아이템 사이의 간격을 일정하게 정렬

✔ 5-7. align-items

align-items를 사용해 아이템을 세로로 정렬한다.

• flex-start: 시작점으로 정렬
• flex-end: 끝점으로 정렬
• center: 가운데로 정렬

✔ 8-13. flex-direction

flex-direction을 사용해 아이템의 방향을 정의한다.

• row: 가로로 정렬
• row-reverse: 가로 반대로 정렬
• column: 세로로 정렬
• column-reverse: 세로 반대로 정렬

• reverse 옵션이 들어가 있으면 flex-end를 해야 왼쪽으로 정렬 (시작점이 반대로 바뀌기 때문)
• column 옵션이 들어가 있으면 justify-content가 세로를, align-items가 가로를 담당한다.

✔ 14-15. order

order을 이용해 아이템의 순서를 변경한다.

• default value: 0
• assignable value: 정수를 부여가능 (...,-2,-1,0,1,2,...)

✔ 16-17. align-self

align-self를 이용해 align-items의 기능을 개별적으로 적용한다.

✔ 18-19. flex-wrap

flex-wrap을 이용해 아이템을 한줄에 정렬할지, 여러줄에 정렬할지 정의한다.

• nowrap: 한줄
• wrap: 여러줄
• wrap-reverse: 반대 방향에서 여러줄

✔ 20. flex-flow

flex-flow를 이용해 flex-wrap과 flex-direction을 같이 정의한다.

• flex-flow: [flex-direction 속성] [flex-wrap 속성]

✔ 21-23. align-content

align-content를 이용해 여러 줄을 세로로 정렬한다.

• align-items와 동일

👍 참고 사이트

1. Flexbox Froggy
2. [CSS] Studying CSS Flex with flexbox froggy