(오늘 글을 안올리면 반응형화 소모임 (메뉴링크) 가 사라질것 같아서..^^)

 

오늘은 flexbox 라도 통칭되는 새로운 css 를 알아볼까 합니다.

제 경우는, 2~3년전에 반응형웹 접할때, '반응형 레이아웃'에 궁금해 하다가 알게된 css 룰인데요,

반응형 이미지 등의 다른 반응형 요소와 더불어 꼭 필요한 요소로 반응형 레이아웃을 생각했었고,

기존 css(와 약간의 js?) 를 이용해서 할 수 있을테지만, 

이왕이면 css 만으로 가능하지 않을까 했는데, 역시 비슷한 생각들을 하고 있었죠.

 

현재 w3c 워킹드래프트로 진행되고 있으니, 아마 css 다음 표준으로 들어오지 않을까 합니다.

지원 브라우저도 거의 모든 브라우져에서 지원하고 IE도 10+ 버전부터는 지원하고요..

 

사실 이 모델이 좀 복잡해서, 자세한 내용은 css-tricks 를 참조하시고, ^^

오늘은 간단한 레이아웃 예제를 통해서 맛만 볼까 합니다.

 

일단 html은 아래처럼 일반적이고요..

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Main</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

 

플렉스박스는, 크게 콘테이너에 주는 css 와 그에 포함되는 요소들에 주는 css로 나눠지는데,

콘테이너, 여기서는 div.wrapper에게 준 css가

.wrapper {
  display: flex;
  flex-flow: row wrap; 
}

처럼 display 특성을 flex로 설정하고, flex-flow로 콘테이너 안의 요소들을 어떻게 정렬할지 알려주게 됩니다. 여기서 사용된 row는 flex-direction 즉 정렬 방향으로, row (가로) 또는 column (세로) 등을 사용할 수 있고, wrap은 flex-wrap 속성으로 wrap (크기가 넘치면 다음줄로), nowrap (한줄에 다 넣기) 등을 설정할 수 있습니다. (자세한 것은 다음번에.. ^^)

그럼, 컨테이너 안의 자식 요소들에 대한 css 들인데요,

.header, .footer { flex: 1 100%; }
.main { flex: 4; }
.aside { flex: 1; }

.aside-1 { order: 1; }
.main    { order: 2; }
.aside-2 { order: 3; }
.footer  { order: 4; }

위에서 보듯이, flex 속성으로 그 요소들의 '상대적' 크기를 지정해 줍니다.
.main 의 경우 .aside가 flex: 1; 로 정의된 반면 .main 은 flex: 4; 로 정의하여, 그 크기의 비율이 (이론적으로) 4:1 이 됩니다.

예제 링크: http://dev.gnuboard.org/rwd/flexbox/layout.html
(하지만 실제로는 좀 다른 경우가 발생하는데, 이부분은 다음번에.. ㅎㅎ)