Properties

Properties

Editing
  • account_tree
  • bug_report

flex-wrap

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

설명

다음 줄로 내려한 플렉스 레이아웃 항목은 새로운 플렉스 박스로 다루어진다. 열 수가 같지 않다면 연속된 흐름을 가지며 열을 유지하지 않는다.

사용 가능한 값 타입

<'flex-wrap'>

DEVDIC-Specified Data Types

flex-wrap 속성에 사용되는 타입이다.

플렉스 레이아웃 항목들이 주축 방향으로 나열되는 방식을 나타낸다.

  • nowrap | wrap | wrap-reverse

사용되는 키워드

  • nowrap

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

  • wrap

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

  • wrap-reverse

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

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

  • 〈'flex-wrap'〉nowrap
    Flexible Box Layout Module Level 1

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

  • Flexible Box Layout Module Level 1

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

  • 〈'flex-wrap'〉wrap-reverse
    Flexible Box Layout Module Level 1

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

구문

  • flex-wrap: wrap;
    Flexible Box Layout Module Level 1
    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";
    Flexible Box Layout Module Level 1

테스트 도구

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

버전 명세

Modules
Module NameStatusSummary
Flexible Box Layout Module Level 1추천 후보

Last review date: 2022-6-16

지원 웹브라우저