CSS3: fiex 요소를 사용하여 div 가로정렬 및 분배하는 레이아웃 방법
div를 중앙정렬을 하기 위해서는 가로 크기 값을 가지고 있어야 합니다. 그리고 margin: 0 auto; 를 하게 되면 해당 div는 중앙정렬이 가능합니다. 그러나 여러개의 div를 가로로 베치하고 이것들을 균등 분배하여 배치하려면 float 요소를 사용하고, 반드시 float 해제를 해줘야 합니다. 그러면 태그들이 늘어날 수 밖에 없습니다.
오늘은 flex 라는것을 배웠습니다. 완전 신세계더군요. 그 복잡했던 div 정렬 부분을 이걸 사용하니 한방에 해결이 됩니다. 특히나 반응형에서 늘 가로사이즈를 얼마나 줘야 할지 고심했는데, 이 flex 속성을 사용해서 바로 해결할 수 있습니다.
단, 아직까지 널리 쓰이는 속성은 아닙니다. 현재는 익스플로러 (IE) 10 이상이어야 하며, 나머지 브라우저마다 지원여부도 다릅니다. 속편하게 최신 브라우저를 모든 인터넷 사용자분들이 쓰시면 좋겠지만, 현실은 아직까지도 XP를 사용하고, 익스플로러 8을 쓰는 머한민국... 5G를 향하는 세상에서 살고 있는게 맞는지 의심이 되네요.
flex 를 이용한 div 가로 정렬
먼저 부모 요소의 display 속성을 flex로 만들어 줍니다. 그리고 자식 요소에는 flex 스타일을 지정해서 정렬을 하는 방식인데, 아래의 결과물을 먼저 살펴봐주시기 바랍니다.
See the Pen CSS3: flex align by rgy0409 (@rgy0409) on CodePen.
일부 잘리는 부분이 있을 수 있으니 0.5배율로 해서 보시는게 편합니다. 현재 wrap 이라는 id 값을 가진 div 안쪽에 3개의 div가 있습니다. #wrap div의 최대 가로크기는 1000px로 만들었습니다. 미디어쿼리 반응형을 위해서 입니다. 그리고 각 div 마다 텍스트를 넣어서 콘텐츠 길이를 달리 했습니다. 콘텐츠의 길이에 영향을 받게 하기 위해서 width 값을 주지 않았습니다. 그럼에도 불구하고 예제를 보시면 flex: 1; 그리고 flex: auto; 의 결과가 가로로 꽉 차게 분배되어 있음을 확인할 수 있습니다.
단 이 둘의 차이는 있습니다. flex: 1;의 결과는 div 내부의 콘텐츠의 길이에 상관 없이 무조건 전체 가로 사이즈를 100% 놓고 균등한 사이즈로 나뉘어 있습니다. 만약 wrap div 안쪽에 3개의 div가 아닌, 4개를 넣으면 결과는 어떻게 될까요? 그 결과가 마지막 예제에 있습니다. 몇개를 넣어도 균등한 간격으로 알아서 나뉘어집니다. flex를 사용했기 때문에 float 해제를 할 필요도 없습니다. 코딩이 훨씬 간단해 집니다.
부모요소에 display: flex;
자식요소에 flex: 1; (또는 auto)
보편적으로 가로 정렬하면서 균등한 크기를 갖도록 레이아웃을 구성하는 방법입니다. flex 값에 1과 auto가 들어가는 차이는 예제를 살펴보시면 아시겠지만, auto의 경우는 div 내부에 존재하는 콘텐츠의 길이가 기준이 되며, 1은 콘텐츠의 크기에 상관 없이, 부모요소의 전체크기를 기준으로 균등 분배가 되는 형태라는것을 알 수 있습니다.
flex: grow shrink basis;
또한 flex에는 grow, shrink, basis 라고 하는 값이 들어갈 수 있는데, 쉽게 풀이를 하자면 차례대로 [확대비율, 축소비율, 기본 너비] 가 됩니다. 그래서 flex: 1 1 auto; 라는 결과값이 확대와 축소비율이 같기 때문에 flex: auto; 와 결과값이 같은 것 입니다. flex 0 0 auto; 의 결과값도 확대와 축소가 모두 0배율이어서 뒤에 오는 auto가 무의미해지는 것 입니다. 그래서 결과값이 flex: none; 과 같습니다. 이 부분에 대해서는 아래의 웹문서를 참고하시어 이해하시는데 도움이 되시기를 바라겠습니다. 저도 아직 더 배워야 할 부분이 많습니다.
예제에서는 자식요소 div에 모두 같은 값의 flex를 부여했지만, 구성하고자 하는 레이아웃의 형태에 따라 각각 다르게 크기를 부여할수도 있습니다. 고정크기로도 만들 수 있습니다. 부모요소의 크기에 상관없이 어떤 자식요소의 div 크기는 무조건 가로 사이즈 200px로 만들겠다면 flex: 0 0 200px; 이렇게 지정하시면 됩니다. 다만 이런 경우는 고정 형태이므로 반응형에 적합하지 않을 수 있겠죠.
flex에 대해서 좀 더 다양한 예제를 사용한 글을 추가로 업데이트 했습니다. 아래의 관련글에서 확인해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
