친절한효자손 취미생활

지난 시간에 flex 정렬에 대해서 설명을 드렸는데, 아무래도 내용이 조금 부족한 듯 하여 다시한번 표현할 수 있는 모든 정렬 방법에 대해서 서술하려고 합니다. 개인적으로 무척이나 좋다고 생각하는 div 정렬 방법이기 때문에, 모든 브라우저에서 지원만 확실히 되면 앞으로는 float 정렬 방법은 거의 안 쓰지 않을까 싶습니다. 익스플로러 10버전 이상이어야 이 기능이 먹힌다고 하니 국내에서 flex를 사용하기에는 아직은 갈 길이 먼 듯 합니다.

 

우선 아래의 예제를 봐주시기 바랍니다. 스타일을 세분화하여 적용시켰습니다. 클래스명을 보시고 어떤 스타일이 적용되었는지도 세심하게 봐주시면 도움이 될 것입니다.

 

See the Pen CSS3: div flex align by rgy0409 (@rgy0409) on CodePen.

 

중요한건 부모 요소에는 기본적으로 display: flex; 속성이 들어가는 것이며, 이 부모 요소의 flex 옵션에 따라서 자식요소에게 영향을 줄 수 있다는 것 입니다. 예를 들어서 자식 요소들을 역순으로 배치할 때, 세로로 정렬하고 싶을 때, 부모 요소에 flex-direction 속성을 넣어서 변경할 수 있습니다. 이런 모든 내용은 위의 예제에 다 있으니 결과물과 HTML, CSS 마크업 상태도 꼭 확인해 보시기 바랍니다. 그리고 아래에도 자세한 설명을 적어두었으니 같이 보시면 이해하시는데 도움이 될 것입니다.

 

flex-direction

부모 요소에서 사용되는 것으로, 자식 요소의 정렬 방식에 대해서 변경합니다. 옵션은 크게 4가지가 있습니다.

 

flex-direction: row; (기본값) ▶ 자식요소가 가로로 마크업 순서대로 왼쪽을 기준으로 정렬됩니다.

flex-direction: row-reverse; ▶ row의 역순으로 배치됩니다.

flex-direction: column; ▶ 자식요소가 세로로 마크업 순서대로 위로부터 정렬됩니다.

flex-direction: column-reverse; ▶ column의 역순으로 배치됩니다.

 

justify-content

마찬가지로 부모 요소에서 사용되는 것으로, 자식 요소의 수평 방향에 대한 정렬 입니다. 옵션은 크게 5가지가 있습니다.

 

justify-content: flex-start; (기본값) ▶ text-align: left; 와 같은 개념입니다. (왼쪽 정렬)

justify-content: center; ▶ text-align: center; 와 같은 개념입니다. (가운데 정렬)

justify-content: flex-end; ▶ text-align: right; 와 같은 개념입니다. (오른쪽 정렬)

justify-content: space-around; ▶ 자식 요소의 좌/우에 충분한 여유공간을 두고 균등하게 정렬 됩니다.

justify-content: space-between; ▶ 자식 요소들의 좌/우에 공간없이 부모요소에 밀착해 균등하게 정렬됩니다. (자식요소가 2개인 경우, 좌/우에 완전 밀착됨)

 

align-items

이것도 부모 요소에서 사용되는 것으로, 자식 요소의 수직 방향에 대한 정렬 입니다. 옵션은 크게 5가지가 있습니다.

 

align-items: stretch; (기본값) ▶ 자식요소의 콘텐츠의 크기에 상관 없이, 가장 큰 높이값을 갖는 자식요소를 기준으로 동일한 세로크기로 맞춰집니다.

align-items: flex-start; ▶ vertical-align: top; 과 같은 개념입니다. (상단 정렬)

align-items: center; ▶ vertical-align: middle; 과 같은 개념입니다. (세로 중앙 정렬)

align-items: flex-end; ▶ vertical-align: bottom; 과 같은 개념입니다. (하단 중앙 정렬)

align-items: baseline; ▶ 설명에 따르면 부모요소의 기준선에 배치된다고 나오는데, 결과값은 flex-start와 동일합니다.

 

flex-wrap

부모 요소에서 사용하는 것으로, 자식 요소를 감쌀 때 어떤 스타일로 감싸줄지를 정의합니다. 보통 자식요소가 고정값을 가질 때 유용하게 사용될 수 있습니다. 부모 요소보다 자식요소 크기가 더 클 경우, 다음 줄로 넘길지를 결정합니다. 옵션은 3가지 입니다.

 

flex-wrap: nowrap; (기본값) ▶ 자식 요소가 다음 줄로 넘어가지 않고 가로로 계속 배치됩니다. 브라우저에 가로 스크롤바가 생깁니다.

flex-wrap: wrap; ▶ 부모 요소에 더 이상 가로 공간이 없을 경우, 자식 요소가 다음 줄로 넘어가서 배치됩니다.

flex-wrap: wrap-reverse; ▶ wrap과 같은 개념이며, 아래가 아닌 위로 배치가 됩니다. (역순)

 

align-content

부모 요소에서 사용하는 것으로, 부모 요소와 자식 요소의 세로 사이즈가 정해진 상태에서 자식요소의 수직에 대한 정렬을 진행할 때 사용합니다. 부모 요소에는 방금 설명한 flex-wrap이 wrap으로 적용된 상태여야 합니다. 옵션은 6가지 입니다.

 

위의 예제에서는 부모요소의 가로 사이즈가 600px, 세로가 500px 이고, 자식요소의 각 div 가로크기는 200px 이며 세로 크기는 없습니다. 그리고 각 요소별로 중앙정렬을 진행했습니다.

 

align-content: stretch; (기본값) ▶ 부모 요소의 세로 크기가 자식 요소의 모든 세로 크기 합보다 크면 자식요소들의 세로 사이즈가 알아서 균등하게 변경되며 부모 요소의 세로 사이즈에 꽉차게 세로로 배치가 됩니다. 만약 자식 요소의 세로 크기가 고정되어 있다면, 부모요소의 위를 기준으로 균등하게 정렬됩니다. (flex-start와 같음)

align-content: flex-start; ▶ 부모요소의 Top을 기준으로 세로 정렬 됩니다.

align-content: center; ▶ 부모요소의 Center를 기준으로 세로 정렬 됩니다.

align-content: flex-end; ▶ 부모요소의 Bottom을 기준으로 세로 정렬 됩니다.

align-content: space-around; ▶ justify-content: space-around 와 같은 개념입니다. 부모 요소를 기준으로 안쪽 여백을 두고 세로로 일정 간격으로 정렬됩니다.

align-content: space-between; ▶ justify-content: space-between 와 같은 개념입니다. 부모 요소를 기준으로 안쪽 여백 없이 세로로 일정 간격으로 정렬됩니다.

 

만약 자식요소의 세로 크기가 고정된 값이 들어가면 어떻게 될까요? 이것에 대한 예시가 위의 마지막 예제 전에 있습니다. 확인해 보시면 아시겠지만 부모 요소의 top을 기준으로 나머지 자식요소들의 빈 공간 마저도 모두 균등하게 세로로 분배되어 배치가 된다는 것을 확인할 수 있습니다.

 

부모요소 div의 정중앙에 자식요소 div 정렬

플렉시블 박스 정렬을 잘 이용하면 div를 원하는대로 배치할 수 있습니다. 위에서 나온 스타일 옵션들을 응용해서 손쉽게 배치가 가능합니다. 이제 position 이나 margin:0 auto의 도움 없이도 flex를 활용해서 얼마든지 배치할 수 있습니다. 위의 예제 중 가장 마지막 부분에 결과가 있습니다. 한번 확인해 보시기 바랍니다.

 

또 하나의 작은 팁!

만약 부모 요소의 브라우저의 가로 사이즈가 반응형으로 실시간 변화할 때, 자식 요소의 div 들도 이에 따라서 똑같이 변화하려 합니다. 이때 flex를 활용해서 미디어쿼리를 쓰지 않더라도 가로로 배치되게 만들고, 창 크기에 따라서 갯수를 정렬시킬 수 있게 됩니다. 다음을 참고해 주시기 바랍니다.

 

See the Pen CSS3 - display:flex; DIV example by rgy0409 (@rgy0409) on CodePen.

 

현재 코드펜이 열렸을텐데요, 위쪽 상단에 있는 Edit on CodePen 목록을 눌러서 새 창을 띄워줍니다. 새 창으로 열린 코드펜 브라우저 창의 가로 사이즈를 늘렸다 줄여보세요. div 상자들이 브라우저 가로 사이즈의 크기에 맞게 똑같은 사이즈로 분배됩니다. 창을 모바일 사이즈까지 줄이면 세로로 하나씩 배치가 되고, 그 이상 커질때마다 적당히 가로로 배치가 되는것을 확인하실 수 있습니다. 그리고 맨 마지막에 남는 나머지 div 박스도 브라우저의 가로 크기에 자동으로 맞춰집니다. 이것은 자식요소의 div안에 있는 다음의 스타일 때문에 가능합니다.

 

flex: 1 1 300px;

 

부모요소의 창 크기에 따라 확대 및 축소 비율이 일정하며, 자식요소의 가로 사이즈가 300px 로 고정된 경우입니다. 하지만 창크기에 따라 확대/축소 비율이 일정히 적용되기 때문에 300px 에서 어느정도 유동성 있게 가로사이즈가 변화합니다. 만약 flex: 0 0 300px 이라면, 부모요소의 사이즈에 상관없이 무조건 자식요소의 가로 크기는 300px 이며, 이는 부모요소의 브라우저 창 크기의 변화에 전혀 영향을 받지 않게 됩니다. 직접 한번 값을 바꿔서 테스트해보시면 무슨 의미인지 금방 아실 것입니다. 그리고 부모 요소에는 반드시 flex-wrap: wrap; 요소가 마크업 되어있어야 합니다. 감싸줘야 하니까요.

 

flex를 활용한 div 레이아웃에 대해 꽤 많이 알아봤습니다. 여기에 나온게 100%가 아닙니다. 부족한 부분은 더 검색을 해서 알아보시기 바랍니다. 저도 새로운 기능을 알게 되면 바로바로 포스팅 하도록 하겠습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band