CSS - flex 개구리 게임(1)

Flexbox Froggy

 

flex 속성을 익히고자 Flexbox Froggy라는 게임을 했다.

1단계에서 9단계까지 순조롭게 진행되었다.

하지만, 10단계에서 막혔는데 어떤 문제였느냐..?

바로! 이 개구리들을 같은 색깔의 연못에 올려놔야 한다.

일단, flex-direction: row-reverse;로 접근했다.

#pond {
  display: flex;
flex-direction: row-reverse;
}

flex-direction: row-reverse; 속성으로 가로 정렬에서 역순으로 배치하기에 성공했다.

이제 이 개구리들을 옆으로 옮기기만 하면 되는데, justify-content: flex-start를 넣어 왼쪽으로 정렬시키려고 했다.

하지만, 먹히지 않았다.

왜 안되지 고민하다가 그 반대의 속성 justify-content: flex-end;를 넣어봤는데,

#pond {
  display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}

신기하게도 결과에 맞게 정렬이 되었다.

그래서 그 이유를 찾아보았다.

그것은 바로, column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.

즉, 시작점이 바뀐다는 뜻이다.

앞으로, column-reverse 또는 row-reverse를 사용한다면 시작점도 바뀐 다는 걸 인지해야겠다.