article

CSS flexible 레이아웃: flex item의 방향과 순서.

며칠 전 “CSS flexible 레이아웃: flex item의 수축과 팽창.” 이라는 포스트를 작성했는데요. 오늘은 flex item의 방향과 순서를 설명합니다. 오늘 설명할 속성은 flex item의 방향을 제어하는 flex-direction, 줄 바꿈을 제어하는 flex-wrap, 그리고 방향과 줄 바꿈을 단축 속성으로 제어하는 flex-flow, 배치 순서를 제어하는 order 라는 속성에 대하여 설명합니다. 예제를 보면서 이해하기에 충분하므로 자세한 설명은 생략합니다.

flex item의 ‘방향’을 제어하는 ‘flex-direction’.

flex-direction 속성은 flex item이 흐르는 방향(상하좌우)을 제어합니다.

flex item의 ‘줄 바꿈’을 제어하는 ‘flex-wrap’.

flex-wrap 속성은 flex item의 줄 바꿈 성질을 제어합니다.

flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 ‘flex-flow’.

flex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.

flex item의 ‘배치 순서’를 제어하는 ‘order’.

order 속성은 flex item의 배치 순서를 제어하는 속성입니다. 기본값은 ‘ 0‘이며 flex-direction 속성의 방향값( row, row-reverse, column, column-reverse)을 기준으로 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치합니다.

관련 글

참고