CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치
지난 시간에 flex에 대한 개념을 안내해 드렸습니다. 혹시 제 블로그가 첫 방문이시라면 우선 아래의 글을 먼저 정독 후 본문을 읽어주시면 더 이해가 빠를 것으로 예상됩니다. flex 정렬 방식에 대해서 정리해놓은 글이니 꼭 읽어주시기 바랍니다.
CSS display: flex 그리고 inline-flex
CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성
그러면 시작해 보겠습니다.
justify-content
이 속성은 자식 요소의 부모 요소인 컨테이너 태그에 적용시키는 flex 옵션입니다. justify-content는 요소의 가로축인 X축에 대해서 정렬하는 6가지 옵션이 있는데 각 종류와 설명은 다음과 같습니다.
justify-content: flex-start; (기본값) ▶ 자식요소를 좌측 정렬
justify-content: flex-end;▶ 자식요소를 우측 정렬
justify-content: center;▶ 자식요소를 중앙 정렬
justify-content: space-between;▶ 자식요소의 양 끝과 부모요소 사이의 공간을 제외한 자식요소 사이의 간격을 일정하게 벌림
justify-content: space-around; ▶ 자식요소 기준 주위 공간을 일정 간격으로 벌림
justify-content: space-evenly;▶ 자식요소와 부모요소를 기준으로 벌림
center 까지는 대충 알겠는데 space 어쩌구부터는 말로 설명하기가 어렵습니다. 따라서 아래의 그림을 보시면 한 눈에 파악이 가능합니다.
이렇게 이해하시면 되시겠습니다. 그림으로 비교하니 확실히 이해가 되시죠?
HTML / CSS 코드
코드펜에 위의 예시로 선보인 것들을 그대로 만들어 보았으니 확인해 보시기 바랍니다.
반응형 동작 예시
flex는 반응형에 대응하기에 위의 움짤처럼 자식요소들이 완벽하게 반응형 브라우저에 맞춰서 위치가 실시간 변합니다. 하지만 고유 속성은 그대로 유지하고 있습니다. 끝.
