플렉스 컨테이너 내의 플렉스 항목에 대한 flex-grow
, flex-shrink
, flex-basis
속성을 한번에 작성한다.
flex
속기 속성의 기본 값은 ‘0 1 auto
’ 이다. flex-grow
을 0
으로 설정시 내용물의 크기에 따라 폭이 결정된다. 단일 auto
키워드로 설정시 각각 ‘1 1 auto
’로 설정된다. 단일 none
키워드로 지정시 ‘0 0 auto
’ 로 설정된다.
none | auto | [ <'flex-grow'> <'flex-shrink'>? || <flex-basis> ]
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
flex-basis
속성에 사용되는 타입이다.
플렉스 항목의 크기를 나타낸다. width
(또는 flex-direction
이 column
인 경우 height
)와 동시 적용한 경우에는 flex-basis
속성이 우선 적용된다.
content | <width-css21>
<length> | <percentage> | auto
<length>
와 <percentage>
타입을 나타낸다.
<length> | <percentage>
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
UA(유저 에이전트)가 자동으로 설정한다. inline-level 수준의 요소이면 가지고 있는 콘텐츠만큼 너비를 가지며 block-level 수준이면 기본적으로 상위 요소의 크기에 상대적으로 100%의 너비를 갖는다. 높이 값을 auto
로 지정하면 inline-level 수준의 요소는 높이를 가질 수 없으며 block-level 수준의 요소는 가지고 있는 콘텐츠만큼 높이가 형성된다.
min-width
/min-height
의 경우에는 자동 최소 크기를 지정하는데 0
으로 해석된다.
CSS 2.1 사양의 width
속성의 값을 나타낸다.
<length> | <percentage> | auto | inherit
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
어떠한 기준으로 부터 백분율로 표현한다.
UA(유저 에이전트)가 자동으로 설정한다. inline-level 수준의 요소이면 가지고 있는 콘텐츠만큼 너비를 가지며 block-level 수준이면 기본적으로 상위 요소의 크기에 상대적으로 100%의 너비를 갖는다. 높이 값을 auto
로 지정하면 inline-level 수준의 요소는 높이를 가질 수 없으며 block-level 수준의 요소는 가지고 있는 콘텐츠만큼 높이가 형성된다.
min-width
/min-height
의 경우에는 자동 최소 크기를 지정하는데 0
으로 해석된다.
다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
부모 요소로부터 속성의 값을 상속받는다.
콘텐츠의 크기에 따라 자동으로 계산한다.
flex-grow
속성에 사용되는 타입이다.
플렉스 컨테이너 내에서 플렉스 항목이 차지하는 공간에 대한 차지하는 비율을 나타낸다.
<number>
flex-shrink
속성에 사용되는 타입이다.
플렉스 컨테이너 내의 플렉스 항목들이 차지하는 크기가 플렉스 컨테이너보다 클 경우에 상대적으로 축소하는 비율을 나타낸다.
<number>
flex-grow
값은 1
, flex-shrink
값은 1
, flex-basis
값은 auto
로 지정된다.
flex-grow
값은 0
, flex-shrink
값은 0
, flex-basis
값은 auto
로 지정된다.
모든 속성을 표시하지 않을 수도 있다.
플렉스 레이아웃 항목의 주축(maix axis) 방향의 크기를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.
flex-direction
과 flex-wrap
속성을 한번에 지정하는 속기 속성이다.
플렉스 컨테이너 내의 레이아웃 항목들의 주축 방향의 크기의 합이 플렉스 컨테이너보다 클 경우 축소 비율을 지정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
flex: 0 1 auto;
flex-grow
값은 1
, flex-shrink
값은 1
, flex-basis
값은 auto
로 지정된다.
flex: 1 1 auto;
Modules | ||
---|---|---|
Module Name | Status | Summary |
Flexible Box Layout Module Level 1 | 추천 후보 | Last review date: 2022-6-16 |