Properties

Properties

Draft
  • account_tree
  • bug_report

flex-basis

유연한 레이아웃 항목의 가로 길이를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.

설명

가로 크기를 지정하는 width와 동일하게 보이지만 flex-basis 다음과 같은 차이점이 갖는다.

  • flex 항목에서만 적용된다.(width는 무시된다.)
  • 다른 flex 항목과 유기적인 관계를 갖는다.
  • flex 주축에서만 작동한다. flex-direction 속성에 의해서 flex 항목의 배치 방향이 바뀌면 width 속성이 다른 역할을 한다.
  • 절대위치에 있는 flex 항목에는 영향을 주지 않는다.

설정 가능한 속성 값

  • auto기본값상수CSS3

    기본 값. 컨테이너 내 내용의 크기에 따른다.

  • number숫자단위허용CSS3

    각 항목의 길이를 픽셀 또는 백분율 단위로 지정한다.

    • 사용 가능한 단위: px, %

구문

  • flex-basis auto or number;기본형식CSS3Unapplied
    상수 또는 숫자로 설정한다.
    flexible 레이아웃을 위한 flex-basic 속성
  • object.style.flexBasis = "200px";자바스크립트 형식CSS3Unapplied
    자바스크립트 형식

지원 웹브라우저