[FLEXBOX FROGGY] CSS 개구리 게임 2 (8~13)

8단계 - 정렬 방향 지정

flex-direction : 정렬할 방향을 지정합니다.

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

 

9단계 - 요소를 세로 방향으로

 

10단계 

column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.

 

11단계

 

12단계

 

13단계