flex레이아웃은 가로(row) 또는 세로(column) 방향을 가질 수 있으며, 설정해주지 않으면가로(row) 방향이 기본값
row, row-reverse 배치의 차이
item이 거꾸로 배치되도록 변경할 수 있음
row-reverse 또는 column-reverse
Main축과 Cross축
row 방향에서는 가로축이 Main, 세로축이 Cross
column 방향에서는 세로축이 Main, 가로축이 Cross
📌Justify-content 와 Align-items
✔ Justify-content는 Main축, Align-item는 Cross축에 적용되는 속성
✔ 처음 배웠을 때 Main 축을 꼬치, item을 어묵에 비유하여 배운 기억이..ㅋㅋ justify-content는 어묵을 정렬하는 것이고 align-items는 꼬치를 수직 축 방향으로 움직이는 것이라고 생각하면 이해하기 쉽다고 했다.
✔ 예시를 통해 차이점을 알아보자. container가 눈에 띄도록 배경색을 회색으로 설정하였다. justify-content를 직접 명시하지 않으면 flex-start가 기본으로 적용됨 'justify-content: center' 를 이용하여 main축 방향의 가운데로 정렬하였음
그렇다면 여기서 align-items: center를 적용하면 어떻게 될까?
align-items: center 적용한 모습
바뀐게 없다. container의 높이가 cross축 방향으로 꽉 차있어 움직일 곳이 없기 때문.
container의 높이를 충분히 높게 잡은 후에 align-items 속성을 적용해보자.
align-items: center 적용align-items: flex-end 적용
가끔 UI를 개발하다가 이렇게 수직축 방향을 정렬하려고 align-items 속성을 주어도 반응이 없었던 적이 있었는데, 이번에 정리하면서 확실히 알게 되었다!
