flexbox froggy 정답 해설 기록✔️(11~15) - 5단계씩 정리 😀 총 24단계

11단계
flex-direction: column;
justify-content: flex-end;

flex-direction: column;을 통해 주축을 수직으로 바꾸고
justify-content: flex-end;를 통해 수직 기준으로 바닥으로 이동시켜준다.

처음

flex-direction: column; 적용하면 주축이 수직으로 바뀐다

justify-content: flex-end;를 적용하면 바닥으로 이동한다.

---

12단계
flex-direction: column-reverse;
justify-content: space-between;

flex-direction: column-reverse;를 적용시켜서 주축을 수직으로 만들어주고, 아래에서부터 역순으로 배치한다.
justify-content: space-between;을 적용시켜서 수직 기준 space-between으로 아이템 간의 사이 간격을 동일하게 만들어준다. 

처음

주축을 수직으로, 역순 배치

space-between으로 아이템 사이의 간격을 동일하게 해준다

---

13단계
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;

flex-direction: row-reverse;를 적용시켜서 수평 기준 역순으로 정렬시킵니다.
초록색 개구리가 오른쪽으로 이동해서 오른쪽 -> 왼쪽 순으로 정렬된다.
이전 단계에서 풀이했던 코드가 반복되고 있는 것을 확인할 수 있다.

justify-content: center;를 적용시켜서 수평 기준 가운데로 정렬한다.

align-items: flex-end;를 적용시켜서 수직 기준 바닥으로 정렬한다. 
여기서 하나 주의할 점이 있는데, 이전 포스팅에서 reverse가 들어가면 end와 start의 역할이 뒤바뀐다고 했다.
이것은 무조건 주축 기준이다.
지금 row-reverse를 줬기 때문에 수평 주축 기준으로 justify-content 속성의 end와 start 역할이 뒤바뀌는 것이다.
교차축인 align-items에는 end와 start의 역할이 그대로 유지된다.
그렇기 때문에 align-items: flex-end를 했을 때 바닥으로 정렬해주는 것이다.
주축을 수직으로 column-reverse를 줬다면, flex-end를 했을 때 맨 위로 정렬되었을 것이다. start와 역할이 바뀌니까

처음

flex-direction: row-reverse;를 통해 수평 기준 역순으로 배치시킨다

justify: center;를 통해 수평에서 가운데로 정렬시킨다

align-items: flex-end;를 통해 수직 기준 바닥으로 정렬한다

---

14단계 
order: 1
개별적으로 요소를 지정하여 이동할 수 있는 order를 이용한다. order는 flex item 속성이다.

order 속성을 적용할 때는 간단하게 생각하면 된다.
order의 초기값은 0이다.
요소 하나를 시작 부분으로 옮기려면 0보다 작은 값을 주자.
0보다 큰 값을 준다면 마지막으로 이동한다.
order: 1, 2, 3.... 등 0보다 큰 값을 주면 된다.

주의할 점
order 속성은 순서를 정의하는 것으로, 초기값이 0이며 양수와 음수 모두 사용할 수 있다.
왼쪽 또는 오른쪽으로 이동한다고 이해하는 것은 오해이다. 주축이 수평일 경우에만 적용된다.

왼쪽이나 오른쪽으로 이동하는 것이 아니라, 주축(main axis)에서의 아이템의 순서를 변경한다고 이해해야 한다.
 즉, order 속성은 순서를 조정하는 것이지, 아이템이 어느 방향으로 이동하는 것이 아니다.
주축이 수평일 경우에만 오른쪽과 왼쪽으로 이동하는 것으로 이해하면 된다.

---

15단계
order: -1;

order: -1;을 적용시켜서 주축이 수평이니까 0보다 작은 수 즉 음수는 왼쪽으로 이동한다.
시작으로 이동하는 것이다.