귀여운 🐸개구리 게임 flexbox froggy🐸로 FLEXBOX를 공부해보았다.

엘리님의 드림코딩 강의를 들으면서 하게 됐는데 정말 유익하다! 사랑해요 엘리님.

❗ 참고 내가 보려고 하는 정리

🧺 justify-content

요소를 가로 선상에서 정렬한다.

flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.

🧺 align items

요소를 세로 선상에서 정렬한다.

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

🧺 flex-direction

정렬할 방향을 지정한다.
❗ Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.

row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

👔 order

flex 요소의 순서를 지정한다.

order: n (정수 모두 가능)

👔 align-self

지정된 align-items 값을 무시하고 flex 요소를 세로선 상에서 정렬한다.

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

🧺 flex-wrap

flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.

nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

🧺 flex-flow

flex-direction, flex-wrap을 한 번에 쓴다.

flex-flow: wrap column;

🧺 align-content

세로선 상의 여분의 공간이 있는 경우 flex container 사이의 간격을 조절합니다.

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 만약 요소가 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.

flex-flow: wrap-reverse column-reverse;
align-content: space-between;
justify-content: center;