Properties

Properties

Editing
  • account_tree
  • bug_report

flex-direction

플렉스 레이아웃 항목의 방향을 설정한다.

사용 가능한 값 타입

<'flex-direction'>

DEVDIC-Specified Data Types

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

플렉스 레이아웃 항목의 출력 방향을 나타낸다.

  • row | row-reverse | column | column-reverse

사용되는 키워드

  • column

    플렉스 컨테이너의 주축은 현재 writing-mode의 블록축과 같은 방향이다. main-start 및 main-end 방향은 각각 현재 writing-mode의 블록 시작 및 블록 종료 방향과 동일하다.

  • column-reverse

    column과 동일하나 main-startmain-end 방향이 바뀐다.

  • row

    플렉스 컨테이너의 주축은 현재 writing-mode의 인라인 축과 같은 방향이다.

  • row-reverse

    row와 동일하나 main-startmain-end가 바뀐다.

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

  • Flexible Box Layout Module Level 1

    플렉스 컨테이너의 주축은 현재 writing-mode의 인라인 축과 같은 방향이다.

  • Flexible Box Layout Module Level 1

    플렉스 컨테이너의 주축은 현재 writing-mode의 블록축과 같은 방향이다. main-start 및 main-end 방향은 각각 현재 writing-mode의 블록 시작 및 블록 종료 방향과 동일하다.

  • Flexible Box Layout Module Level 1

    column과 동일하나 main-startmain-end 방향이 바뀐다.

  • Flexible Box Layout Module Level 1

    row와 동일하나 main-startmain-end가 바뀐다.

구문

  • flex-direction: column;
    Flexible Box Layout Module Level 1
    flex-direction 속성 값을 column으로 지정한 경우에 대한 결과
  • object.style.flexDirection = "column";
    Flexible Box Layout Module Level 1

테스트 도구

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

버전 명세

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

Last review date: 2022-6-16

지원 웹브라우저