Properties

Properties

Editing
  • account_tree
  • bug_report

flex-wrap

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

설명

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

사용 가능한 값 타입

〈'flex-wrap'〉

  • nowrap | wrap | wrap-reverse

사용되는 키워드

  • nowrap

    플렉스 레이아웃 항목들이 한 줄로 나열된다.

  • wrap

    플렉스 레이아웃 항목들을 필요하다면 여러 줄에 걸처 나열한다.

  • wrap-reverse

    wrap과 동일하나 순서가 역순으로 나열된다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • flex-wrap 〈flex-wrap〉;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 속성 값 테스트

지원 웹브라우저