flex 기초 - flex란 무엇인가?

웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다.

flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다.

 

flex 시작하기

flex를 시작하는 방법은 정말 간단하다. flex container에 "display:flex;"를 적용하면 된다.

위와 같은 코드를 작성했을 때 div는 기본적으로 block 속성을 가지고 있기 때문에 수직으로 차곡 차곡 쌓이게 된다.

flex container에 display:flex; 속성을 적용하자 수직 정렬이던 내부의 flex item들이 수평으로 정렬된 것을 확인할 수 있다. 이렇게 display 속성값을 설정해주는 것만으로, 해당 div가 flex container이며 내부 div들이 flex item임을 정의한 것이다.

 

flex container와 flex item에는 적용할 수 있는 속성이 각각 다르다.

 

• flex container : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
• flex item : order, flex-grow, flex-shrink, flex-basis, flex, align-self

앞으로 flex-flow 부터 align-self 까지 각 속성에 대해 차례대로 소개할 예정이다. 

 

[참고] display:flex; 외에 display:inline-flex; 속성값이 있다. 속성값으로 flex를 사용하면 block 속성의 flex container를 정의하고, inline-flex를 사용하면 inline 속성의 flex-container를 정의한다. 여기에서 주의할 점은 수직, 수평 정렬이 가리키는 대상이 내부 item이 아닌 container라는 것이다. 둘 중 어떤 것을 사용해도 내부 item은 수평으로 정렬되며, flex container가 두 개 이상 연속으로 위치해 있을 때에 block, inline 속성값이 영향을 미친다.