Properties

Properties

Draft
  • account_tree
  • bug_report

flex

부모 요소 안에 있는 컨테이너 항목이 차지하는 크기를 한번에 설정한다.

설명

flex 축약 형식의 기본 값은 ‘0 1 auto’ 이다. flex-grow을 0으로 설정시 내용물의 크기에 따라 폭이 결정된다. 단일 auto 키워드로 설정시 각각 ‘1 1 auto’로 설정된다. 단일 none 키워드로 지정시 ‘0 0 auto’ 로 설정된다.

설정 가능한 속성 값

  • flex-grow속성CSS3

    컨테이너 항목이 나머지 부분에 대하여 상대적으로 차지하는 정도를 숫자로 지정, 기본 값은 0이며 콘텐츠 양에 따라 정해진다.

  • flex-shrink속성CSS3

    컨테이너 항목이 나머지 부분에 대하여 상대적으로 축소하는 정도를 숫자로 지정. 기본 값은 1이다. 각 항목의 flex-basis 합계가 부모 요소의 폭보다 큰 값이어야 결과가 적용된다.

  • flex-basis속성CSS3

    컨테이너 항목의 가로 길이를 설정한다. 기본 값은 auto이며 컨테이너 내 콘텐츠 양에 따른다.

  • auto키워드CSS3

    auto로 설정시 각각 ‘1 1 auto’로 설정된다.

  • none키워드CSS3

    none로 설정시 ‘0 0 auto’ 로 설정

구문

  • flex flex-grow flex-shrink flex-basis;기본형식CSS3Unapplied

    부모 요소 안의 자식 요소들에 대해 유연하게 자리를 차지할 수 있도록 관련 속성들을 한번에 작성한다. 설정하지 않은 세부 속성은 기본 값으로 처리된다.

    flexible 레이아웃을 위한 flex 속성

지원 웹브라우저