Properties

Properties

Draft
  • account_tree
  • bug_report

flex-wrap

공간이 부족할 경우 유연한 레이아웃 항목의 줄바꿈 여부를 지정한다.

설명

다음 줄로 내려한 flex 항목은 새로운 flex 컨테이너로 다루어지며 열수가 같지 않다면 연속된 흐름을 갖으며 열을 유지하지 않는다.

설정 가능한 속성 값

  • nowrap기본값키워드CSS3

    기본 값이며 줄바꿈을 하지 않는다.

  • wrap키워드CSS3

    공간이 충분하지 않을 경우 줄바꿈을 한다.

  • wrap-reverse키워드CSS3

    공간이 충분하지 않을 경우 레이아웃 항목을 역순으로 줄바꿈한다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • flex-wrap nowrap or wrap or wrap-reverse or initial;기본형식CSS3

    주어진 상수로 설정이 가능하다.

    flex-grow가 0, flex-shrink가 0, flex-baiss가 auto인 flexible 레이아웃일 경우 flex-wrap 속성 값 테스트

    flex-grow가 1, flex-shrink가 1, flex-baiss가 auto인 flexible 레이아웃일 경우 flex-wrap 속성 값 테스트
  • object.style.flexWrap = "wrap";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

flexible 레이아웃일 경우 flex-wrap 속성 값 테스트

지원 웹브라우저