align,justify의 items와 content의 차이점

Question

안녕하세요 선생님

재밌고 다양하게 움직이는 웹사이트를 만들고 싶어서 이 강의를 수강했는데.

벌써부터 만족하고 잘 보고 있습니다.ㅎㅎ

강의를 보다가 궁금한게 생겨서 질문합니다

div 박스 안에 글을 가운데 배치하기 위해 align-items: center; 하고 justify-content: center;를 하셨는데

제가 궁금해서 이것저것 테스트해보니 align은 세로 정렬을 해주고 justify는 가로 정렬을 하는 건 알게 되었는데요.

그런데 align에서 content를 넣으면 정렬이 풀리고, justify에 items를 넣으면 마찬가지로 정렬이 풀리더라구요.

align과 justify의 차이점이 어떤 것이길래 align에는 items이 먹히고 justify에는 content가 먹히는지 알려주실 수 있을까요? 덤으로 items와 content의 차이점도 알려주시면 감사하겠습니다~~

Answer

items와 content는 조합할 수 있는 개념이 아니고, 그냥 정해진 속성 명이라서

align-items와 justify-content로 정해진대로 써주셔야해요~

(예를들어 justify-items 속성은 제안된 스펙은 존재하지만, 공식적으로 지원하지는 않는 것으로 알고 있습니다.)

축의 방향은 flex-direction으로 얼마든지 바꿀 수 있기 때문에 가로 세로로 생각하지 마시고,

justify는 축의 방향, align은 축의 수직방향으로 생각하시는게 좋습니다.

flex-direction: row 일 때 justify-content는 가로 방향이지만 flex-direction: column이 되면 세로 방향으로 바뀌거든요.

참고로 align-content는 flex-wrap: wrap; 으로 설정되고, 두 줄 이상이어야 의미가 있는 값입니다 ^^

https://youtu.be/eprXmC_j9A4

이 영상도 한 번 봐보세요 ^^ 공부 화이팅입니다!