[FLEXBOX FROGGY] CSS 개구리 게임 1 (1~7)

1단계 - 오른쪽 정렬

justify-content : flex요소들을 가로선 상에서 정렬

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

2단계 - 가운데 정렬

 

3단계 - flex 주위 간격 설정

 

4단계 - 요소 간격

---

5단계 - 세로 정렬

align-items : flex 요소를 세로선 상에서 정렬

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

• 

6단계 - 화면 중앙 정렬

 

7단계