justify-content, align-content를 사용하여 플렉스 아이템의 위치 조정 [CSS]
justify-content, align-content를 사용하여 플렉스 아이템의 위치 조정 [CSS]
플렉스 아이템(Flexbox 또는 display:flex; 등으로 가로 정렬한 요소)의 위치를 조정하는 방법을 소개합니다.
【justify-content】 가로 방향으로 위치 지정
justify-content는 플렉스 아이템(Flexbox 또는 display:flex; 등으로 가로 배열한 요소)의 주축 방향의 위치를 가로 방향으로 지정합니다.
justify-content: flex-start; (초기값. 줄 머리 정렬. 일반적으로 왼쪽 정렬) 
justify-content: flex-end; (행 끝 정렬. 보통 오른쪽 정렬.)
justify-content: center; (가운데 정렬)
【align-content】 세로 방향으로 위치 지정
align-content는 플렉스 아이템(Flexbox 또는 display:flex; 등으로 가로 정렬한 요소)의 주축 방향의 위치를 세로 방향으로 지정합니다.
align-content: stretch; (초기값. 플렉스 아이템이 늘려져 정렬된다.) 
align-content: flex-end; (종료 위치 정렬. 보통 하단 정렬)
align-content: center; (가운데 정렬)
요약
justify-content, align-content는 플렉스 아이템(Flexbox 또는 display:flex; 등으로 가로 정렬한 요소)의 위치를 조정하는 프로퍼티입니다.
margin:auto;등을 설정하는 것보다 간단하게 아이템의 종횡 중앙 정렬이나, 등 간격 배치를 실현할 수 있으므로 꼭 사용해 보세요. 참고문헌
Reference
이 문제에 관하여(justify-content, align-content를 사용하여 플렉스 아이템의 위치 조정 [CSS]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RinTenma/items/919297eb4f994580e8fc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
