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

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

  1. flex item의 ‘방향’을 제어하는 ‘flex-direction’.
  2. flex item의 ‘줄 바꿈’을 제어하는 ‘flex-wrap’.
  3. flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 ‘flex-flow’.
  4. flex item의 ‘배치 순서’를 제어하는 ‘order’.

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

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

  • Name: flex-direction
  • Value: row | row-reverse | column | column-reverse
  • Initial: row
  • Applies to: flex container

CSS flex-direction 예제.

See the Pen CSS flex ‘flex-direction’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

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

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

  • Name: flex-wrap
  • Value: nowrap | wrap | wrap-reverse
  • Initial: nowrap
  • Applies to: flex container

CSS flex-wrap 예제.

See the Pen CSS flex ‘flex-wrap’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

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

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

  • Name: flex-flow
  • Value: <flex-direction> || <flex-wrap> // 둘 중 하나 또는 둘을 선언해야 한다.
  • Initial: row nowrap
  • Applies to: flex container

CSS flex-flow 예제.

See the Pen CSS flex ‘flex-flow’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

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

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

  • Name: order
  • Value: <integer> // ‘0, 양의 정수, 음의 정수’를 사용할 수 있음.
  • Initial: 0
  • Applies to: flex items and absolutely-positioned children of flex containers // 절대값으로 처리된 flex-item에도 적용 가능하다고 하는데 어떤 상황에서 쓰이는지 정확히 알 수 없음.

CSS flex order 예제.

See the Pen CSS flex ‘order’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

관련 글

참고

사람과 사람 사이의 접점을 설계하는 프론트 엔드 엔지니어.

Facebook Twitter 

공유하기