Level 24
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
-> 이해가 잘 안간다.
flex-wrap: wrap-reverse;을 설정하면 요소들을 여러 줄에 걸쳐 반대로 정렬한다. (출처)
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
-> flex-direction의 값으로 column을 설정함으로써 주축의 방향이 세로로 바뀌었다.
그러므로 justify-content 속성을 써야한다.
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
-> 교차축인 가로축을 정렬해야 하는데, 줄이 두 개 이상이므로 align-content 속성을 사용한다.
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
-> flex-wrap: wrap-reverse; 를 이해 못해서 풀지 못한 문제였다. 그림으로 정리하니까 이해가 됐다.
도움 받은 곳: https://hj-tilblog.tistory.com/90