CSS flex align-content 자식요소 세로 정렬(배치)2
지난 시간에는 align-items에 대해서 알아봤습니다. align-items는 문서 프로그램으로 비유하자면 텍스트의 왼쪽/가운데/오른쪽 정렬과 비슷합니다. 이번에 알아볼것은 items가 아닌 content죠. align-content는 각 자식 요소별 간격에 따른 다양한 배치를 정의합니다. 만약 컨테이너의 부모 요소에 단 하나뿐인 자식 요소가 있다면 세로를 기준으로 정렬할 때 align-items를 사용해도 되고 align-content를 사용해도 됩니다. 하지만 자식 요소가 여러개가 들어가는 순간, 또한 자식 요소의 크기가 어떻느냐에 따라서 items 보다는 content를 사용하는것이 훨씬 편리합니다.
align-content
백문이 불여일견입니다. 예시를 살펴보겠습니다.
See the Pen CSS flex : align-content by rgy0409 (@rgy0409) on CodePen.
기억하고 계십니까? 전 전 시간에 justify-content에 대해서 배웠을 것입니다. 가로축에 대한 자식요소 정렬 방법이죠. 즉 align-content는 같은 content라는 단어가 들어가니 그와 대조되는 개념인 세로축에 대한 자식요소 정렬 방법이라고 이해하면 기억하는데 도움이 될 것입니다. justify는 가로, align은 세로! 이렇게 머릿속에 각인해 놓습니다.
위의 예시를 살펴보시면 과거 justify-content에서 배웠던 옵션들과 상당히 유사하다는것을 알 수 있습니다. 혹시 이 내용을 잘 모르시겠다면 아래의 글을 읽어주시기 바랍니다.
CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치
이제 align-content의 각 속성을 알아보겠습니다. justify-content와 다를 바 없습니다.
justify-content: stretch; (기본값) ▶ 자식요소를 세로로 100% 채움
justify-content: flex-start; (기본값) ▶ 자식요소를 위쪽 정렬
justify-content: flex-end;▶ 자식요소를 아래쪽 정렬
justify-content: center;▶ 자식요소를 중앙 정렬
justify-content: space-between;▶ 자식요소의 양 끝과 부모요소 사이의 공간을 제외한 자식요소 사이의 간격을 일정하게 벌림
justify-content: space-around; ▶ 자식요소 기준 주위 공간을 일정 간격으로 벌림
justify-content: space-evenly;▶ 자식요소끼리 동일간 간격으로 벌림
이렇습니다. 허나 center 까지는 알겠는데 justify 때와 마찬가지로 space-between 부터는 잘 이해가 되지 않습니다. 그러니 이번에도 그림으로 직접 알아봅시다.
그림으로 알아보기
이렇게 됩니다. space-between은 부모 요소의 세로 끝을 모두 차지하고 나머지 자식 요소가 각각 같은 간격으로 자동 배치가 되는 구조입니다. space-around는 자식 요소의 margin 값이 서로 동일하게 주어지며 배치되는 방식입니다. space-evenly는 부모요소인 컨테이너와 자식 요소 사이간의 간격이 모두 일정해지는 배치 방식입니다. 이런 차이점이 있으니 참고하시어 레이아웃을 원하는 스타일로 꾸며보시기 바랍니다. 끝.
