NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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

본문 건너 뛰기

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

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. order

flex-direction

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

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

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

flex-wrap

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

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

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

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
  • Inherited: no

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

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에도 적용 가능하다고 하는데 어떤 상황에서 쓰이는지 정확히 알 수 없음.
  • Inherited: no

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

관련 글

참고

분류: CSS,웹 표준 | 2017년 4월 24일, 18:49 | 정찬명 | 댓글: 7개 |
트랙백URI - http://naradesign.net/wp/2017/04/24/2440/trackback/