CSS display flex 속성 - PC는 가운데 비우고, 모바일은 중앙으로 정렬

인터넷에 CSS 설명 문서들이 자세한 것이 참 많은데,
역설적이게도 너무 자세해서 알아먹기 힘든 경우가 많았습니다.
이 포스팅은 display flex 속성을 설명하기 위한 문서는 아니고,
제가 어떤 꼼수를 동원해서 구현했는지에 대한 기록입니다.

– PC페이지는 가운데를 비우고 왼쪽끝/오른쪽끝으로 컨텐츠를 배치하기.

– 모바일 페이지에서는 컨텐츠를 중앙으로 몰아서 배치하기.

이렇게 컨텐츠 2개를 껍데기가 감싸고 있는 형태로 구조를 짜면 체계적이겠죠.

flex 옵션을 부여하면 배치를 자유롭게 할 수 있어서
최근 몇 년 사이 display 속성 선택지들 중에서 개발자들이 많이 선택하는 것 같습니다.
CSS 파일에 아래처럼 추가했습니다.

.껍데기 {
display: flex;
flex-wrap: wrap; }

이렇게 자식 컨텐츠를 감싸고 있는 부모 컨테이너에 display: flex; 를 부여해야 되는데, 부모는 자식을 감싸고 움직이는 거니까 flex-wrap: wrap; 는 항상 세트로 넣는 것 같습니다.

.껍데기 {
justify-content: space-between; }

영어가 굉장히 직관적이죠? 콘텐츠 정렬 : 가운데를 띄워라.
간단.

그런데 이게 모바일 해상도 수준으로 좁아지면 예쁘게 안보이니까 중앙 배열로 바꾸는 설정을 추가했습니다.

@media screen and (max-width: 600px) {
.껍데기 {
justify-content: center;
flex-direction: column;} }

600픽셀 이하부터 / 껍데기 안에 있는 콘텐츠들 정렬은 중앙으로 / 배열은 세로 방향으로.
세로정렬 지정 안해주면 자식 컨텐츠들이 가로로 배열될 것으로 예상합니다.

자식 요소에는 지정할 필요가 없는 것으로.

이해를 돕기 위해 범위를 줄였으나, 제대로 이해하기 위해서는 책/강의 등 심화과정이 필요하겠습니다. 요즘은 홍보 많이 하니까 접근성은 좋을 겁니다. 이 포스팅에도 광고 달리겠죠? 저보다 많이 아는 분들일 거예요.

훌륭한 문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout

CSS display flex 속성 – PC는 가운데 비우고, 모바일은 중앙으로 정렬