인프런 커뮤니티 질문&답변
작성한 질문수
align,justify의 items와 content의 차이점
해결된 질문
작성
·
7.5K
2
안녕하세요 선생님
재밌고 다양하게 움직이는 웹사이트를 만들고 싶어서 이 강의를 수강했는데.
벌써부터 만족하고 잘 보고 있습니다.ㅎㅎ
강의를 보다가 궁금한게 생겨서 질문합니다
div 박스 안에 글을 가운데 배치하기 위해 align-items: center; 하고 justify-content: center;를 하셨는데
제가 궁금해서 이것저것 테스트해보니 align은 세로 정렬을 해주고 justify는 가로 정렬을 하는 건 알게 되었는데요.
그런데 align에서 content를 넣으면 정렬이 풀리고, justify에 items를 넣으면 마찬가지로 정렬이 풀리더라구요.
align과 justify의 차이점이 어떤 것이길래 align에는 items이 먹히고 justify에는 content가 먹히는지 알려주실 수 있을까요? 덤으로 items와 content의 차이점도 알려주시면 감사하겠습니다~~
답변 1
1
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
이 영상도 한 번 봐보세요 ^^ 공부 화이팅입니다!