flexbox

flexbox layout

flexbox layout은 컨테이너를 기준으로 공간을 키우거나 줄여 맞춤 배치하도록 설정하는 방식의 디자인이다. 다음과 같이 영역에 설정한다.

/* 한 줄을 차지 */
display:flex;

/* 인라인 배치 */
display:inline-flex;

display:flex

display 속성을 flex로 설정하면 내부 요소들의 배치 방식이 변경된다. 자기 자신은 block 속성을 가진다.

display:inline-flex

display 속성을 inline-flex로 설정하면 내부 요소들은 flex와 동일하게 배치되지만 자기 자신은 inline-block 형태로 배치된다.

flex-direction

flex-direction 속성은 flexbox의 배치 방향을 결정한다.

• flex-direction:row;

• flex-direction:row-reverse;

• flex-direction:column;

• flex-direction:column-reverse;

flex-wrap

flex-wrap 속성은 flexbox의 폭이 100%를 넘을 경우 줄 바꿈 여부를 결정한다.

• flex-wrap : wrap; - 폭이 100%를 넘어가면 줄을 바꾸어 배치

• flex-wrap : nowrap; - 폭이 100%를 넘어가도 줄을 바꾸지 않고 비율로 설정하여 (기본값)

flex-flow

flex-flow 속성으로 flex-direction과 flex-wrap 속성을 같이 설정할 수 있다.

flex-grow

flex-grow 속성은 flexbox의 내부 항목에 설정하여 비어있는 영역에 대한 점유 비율을 설정한다.

flex-shrink

flex-shrink 속성은 flexbox의 내부 항목에 설정하여 폭이 초과한 경우에 대한 수축 비율을 설정한다.

예제의 inner 블록은 50%의 폭을 가지고 있어 합계 150%가 되므로 한 줄에 표시할 수 없는 상황이다. flex-wrap 속성도 nowrap 으로 되어 있어 줄 바꿈도 이루어지지 않기 때문에 영역이 부족한 상황이며, 이 때 폭이 같음에도 설정된 flex-shrink 비율에 따라 수축하는 것을 알 수 있다. 값이 클 수록 더 많이 수축한다.

flex-basis

flex-basis 속성은 flexbox 내부 항목의 초기 크기를 지정하는 데 사용한다.

지원 브라우저 확인

CSS Flexible Box Layout Module | Can I use... Support tables for HTML5, CSS3, etccaniuse.com