Properties

Properties

Editing
  • account_tree
  • bug_report

flex-direction

Flexible 레이아웃 항목의 방향을 설정한다.

사용 가능한 값 타입

〈'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가 바뀐다.

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

구문

  • flex-direction 〈flex-direction〉;CSS3
    flex-direction 속성 값을 column으로 지정한 경우에 대한 결과
  • object.style.flexDirection = "column";CSS3

    자바스크립트 형식

테스트 도구

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

버전 명세

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

Last review date: 2022-6-16

지원 웹브라우저