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 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

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

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

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

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

관련 글

참고

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

1개의 댓글이 있습니다.

  1. 익명 댓글:

    테스트해봅시다

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님