Properties

Properties

Editing
  • account_tree
  • bug_report

flex

플렉스 컨테이너 내의 플렉스 항목에 대한 flex-grow, flex-shrink, flex-basis 속성을 한번에 작성한다.

설명

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

사용 가능한 값 타입

<'flex'>

DEVDIC-Specified Data Types

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

  • Flexible Box Layout Module Level 1
    none | auto | [ <'flex-grow'> <'flex-shrink'>? || <flex-basis> ]

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <'flex-basis'>

    DEVDIC-Specified Data Types

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

    플렉스 항목의 크기를 나타낸다. width(또는 flex-directioncolumn인 경우 height)와 동시 적용한 경우에는 flex-basis 속성이 우선 적용된다.

    • Flexible Box Layout Module Level 1
      content | <width-css21>
    Details

    포함된 타입

    • <logical-size>

      DEVDIC-Specified Data Types

      콘텐츠의 방향(writing-mode)에 따라 논리적인 박스의 크기를 나타낸다.

      • <length> | <percentage> | auto
      Details

      포함된 타입

      • <length-percentage>

        <length><percentage> 타입을 나타낸다.

        • CSS Values and Units Module Level 3
          <length> | <percentage>
        Details

        포함된 타입

        • <length>

          숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

          • CSS Basic User Interface Module Level 4
            <length>
          Details

          사용되는 단위

          아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

          • cm

            1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

          • in

            1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

          • mm

            1cm의 1/10 값을 나타낸다.

          • pc

            1in의 1/16 값을 나타낸다.

          • pt

            1in의 1/72 값을 나타낸다.

          • px

            스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

          • Q

            1cm의 1/40을 나타낸다.

          • deg

            보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

          • grad

            400grad(그라디안)은 완전한 원을 만든다.

          • rad

            2π(라디안)이 완전한 원을 만든다.

          • turn

            1turn(턴)이 완전한 원을 만든다.

          • cap

            대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

          • ch

            글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

          • em

            대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

          • ex

            대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

          • ic

            한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

          • lh

            요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

          • rem

            html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

          • rlh

            html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

          • Hz

            1초당 발생한 진동수를 나타낸다.

          • kHz

            1000Hz를 나타낸다.

          • fr

            그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

          • vb

            html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

          • vh

            뷰포트 높이를 상대적으로 1% 높이를 갖는다.

          • vi

            html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

          • vmax

            vw 또는 vh 중 큰 값을 나타낸다.

          • vmin

            vw 또는 vh 중 작은 값을 나타낸다.

          • vw

            뷰포트 너비를 상대적으로 1% 폭을 갖는다.

          • dpcm

            1cm당 점(dot)의 수를 나타낸다.

          • dpi

            1in당 점(dot)의 수를 나타낸다.

          • dppx

            1픽셀(pixel)당 점(dot)의 수를 나타낸다.

          • ms

            1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

          • s

            초를 나타낸다.

        • <percentage>

          어떠한 기준으로 부터 백분율로 표현한다.

      사용되는 키워드

      • auto

        CSS Box Sizing Module Level 3CSS1.0CSS2.1

        UA(유저 에이전트)가 자동으로 설정한다. inline-level 수준의 요소이면 가지고 있는 콘텐츠만큼 너비를 가지며 block-level 수준이면 기본적으로 상위 요소의 크기에 상대적으로 100%의 너비를 갖는다. 높이 값을 auto로 지정하면 inline-level 수준의 요소는 높이를 가질 수 없으며 block-level 수준의 요소는 가지고 있는 콘텐츠만큼 높이가 형성된다.

        min-width/min-height의 경우에는 자동 최소 크기를 지정하는데 0으로 해석된다.

    • <width-css21>

      CSS 2.1 사양의 width 속성의 값을 나타낸다.

      • CSS2.1
        <length> | <percentage> | auto | inherit
      Details

      포함된 타입

      • <length>

        숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

        • CSS Basic User Interface Module Level 4
          <length>
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length>]
      • <percentage>

        어떠한 기준으로 부터 백분율로 표현한다.

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

      사용되는 키워드

      • auto

        CSS Box Sizing Module Level 3CSS1.0CSS2.1

        UA(유저 에이전트)가 자동으로 설정한다. inline-level 수준의 요소이면 가지고 있는 콘텐츠만큼 너비를 가지며 block-level 수준이면 기본적으로 상위 요소의 크기에 상대적으로 100%의 너비를 갖는다. 높이 값을 auto로 지정하면 inline-level 수준의 요소는 높이를 가질 수 없으며 block-level 수준의 요소는 가지고 있는 콘텐츠만큼 높이가 형성된다.

        min-width/min-height의 경우에는 자동 최소 크기를 지정하는데 0으로 해석된다.

      사용되는 전역 키워드

      다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

      • inherit

        부모 요소로부터 속성의 값을 상속받는다.

    사용되는 키워드

    • content

      콘텐츠의 크기에 따라 자동으로 계산한다.

  • <'flex-grow'>

    DEVDIC-Specified Data Types

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

    플렉스 컨테이너 내에서 플렉스 항목이 차지하는 공간에 대한 차지하는 비율을 나타낸다.

    • Flexible Box Layout Module Level 1
      <number>
    Details

    포함된 타입

    • <number>

      정수 또는 실수를 표현한다.

  • <'flex-shrink'>

    DEVDIC-Specified Data Types

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

    플렉스 컨테이너 내의 플렉스 항목들이 차지하는 크기가 플렉스 컨테이너보다 클 경우에 상대적으로 축소하는 비율을 나타낸다.

    • Flexible Box Layout Module Level 1
      <number>
    Details

    포함된 타입

    • <number>

      정수 또는 실수를 표현한다.

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]

사용되는 키워드

  • auto

    flex-grow 값은 1, flex-shrink 값은 1, flex-basis 값은 auto로 지정된다.

  • none

    flex-grow 값은 0, flex-shrink 값은 0, flex-basis 값은 auto로 지정된다.

속기에 사용되는 관련 속성

모든 속성을 표시하지 않을 수도 있다.

  • flex-basis

    플렉스 레이아웃 항목의 주축(maix axis) 방향의 크기를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.

  • flex-flow

    flex-directionflex-wrap 속성을 한번에 지정하는 속기 속성이다.

  • flex-shrink

    플렉스 컨테이너 내의 레이아웃 항목들의 주축 방향의 크기의 합이 플렉스 컨테이너보다 클 경우 축소 비율을 지정한다.

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

  • Flexible Box Layout Module Level 1

    flex-grow 값은 0, flex-shrink 값은 0, flex-basis 값은 auto로 지정된다.

  • Flexible Box Layout Module Level 1

    flex-grow 값은 1, flex-shrink 값은 1, flex-basis 값은 auto로 지정된다.

구문

  • flex: 0 1 auto;
    Flexible Box Layout Module Level 1

    flex-grow 값은 1flex-shrink 값은 1flex-basis 값은 auto로 지정된다.

  • flex: 1 1 auto;
    Flexible Box Layout Module Level 1
    flexible 레이아웃을 위한 flex 속성

버전 명세

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

Last review date: 2022-6-16

지원 웹브라우저