며칠 전 “CSS flexible 레이아웃: flex item의 수축과 팽창.” 이라는 포스트를 작성했는데요. 오늘은 flex item의 방향과 순서를 설명합니다. 오늘 설명할 속성은 flex item의 방향을 제어하는 flex-direction, 줄 바꿈을 제어하는 flex-wrap, 그리고 방향과 줄 바꿈을 단축 속성으로 제어하는 flex-flow, 배치 순서를 제어하는 order 라는 속성에 대하여 설명합니다. 예제를 보면서 이해하기에 충분하므로 자세한 설명은 생략합니다.
flex-direction 속성은 flex item이 흐르는 방향(상하좌우)을 제어합니다.
flex-directionrow | row-reverse | column | column-reverserowflex-wrap 속성은 flex item의 줄 바꿈 성질을 제어합니다.
flex-wrapnowrap | wrap | wrap-reversenowrapflex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.
flex-flow<flex-direction> || <flex-wrap> // 둘 중 하나 또는 둘을 선언해야 한다.row nowraporder 속성은 flex item의 배치 순서를 제어하는 속성입니다. 기본값은 ‘ 0‘이며 flex-direction 속성의 방향값( row, row-reverse, column, column-reverse)을 기준으로 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치합니다.
order<integer> // ‘0, 양의 정수, 음의 정수’를 사용할 수 있음.0