flex는 CSS flex 컨테이너의 공간상에서 item이 차지하는 공간을 알맞게 키우거나 줄이게 하는 Property 입니다.  이 Property는 flex-grow, flex-shrink, and flex-basis의 값을 한번에 설정하는 shorthand property 입니다.

flex container 안에 존재하는 item의 property로 설정되어야 하는 것 입니다.

대부분의 경우, flex의 값으로는 auto, initial, none의 값이나 <positive unitless number> 값이 사용됩니다. 각각 적용되는 값의 효과를 보실려면 아래의 flex container 들의크기를 바꿔 보세요.:

auto
아이템의 크기는 해당 아이템의 widthheight의 크기로 만들어 집니다. Flex container의 공간이 남으면 해당 공간에 대하여 자기 지분을 받습니다. 그리고 Flex Container의 공간이 줄어들면 item의 공간도 줄어듭니다. "flex: 1 1 auto"와 값이 같습니다.
initial
auto랑 똑같은대. Flex container가 공간이 남아도 자기 지분이 0 이어서 안커집니다. 줄어들 때에는 Auto랑 똑같이 줄어듭니다. "flex: 0 1 auto"와 값이 같습니다.
none
Flex Container 안에서 자기 크기를 지키고 있습니다. 여유공간이 늘어난다고 해서 커지지도 않고, 여유공간이 줄어든다고 해서 줄어들지도 않습니다.  "flex: 0 0 auto".와 값이 같습니다.
<positive-number>
Grow하거나 Shrink 할 때의 비율을 나타냅니다. flex-basis 에 숫자로 때려박으면 item의 min-wdith 크기가 되어줍니다. "flex: <positive-number> 1 0".

Flex Item 들은 자신의 minimum content size 보다 더 작게 줄어들지 않습니다. 이걸 바꿀려면 해당 아이템의 min-width 이나 min-height 값을 변경 해 주세요.

Syntax

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

flex property 의 값은 1개, 2개 또는 3개가 할당될 수 있습니다.

a unitless number 라는 말이 나옵니다. 이것은 Height나 Width값을 나타내는 숫자가 아니라는걸 말합니다. 즉 100px나 12em 같은 size를 가지는 number가 아니라는 이야기입니다.

One-value syntax: 아래의 값 중 하나가 되어야 합니다. :

  • a unitless <number>: 양수값 하나만 나오면 이건 <flex-grow>의 값을 나타냅니다.
  • a valid value for width: 크기로서의 값이 나오면 이건 <flex-basis>의 값을 나타냅니다.
  • none, auto, or initial 아니면 이렇게 셋중에 하나가 올 수 있습니다.

Two-value syntax: 첫번째 값은 반드시 unitless <number>이어야 하고 해당 값은 <flex-grow>을 나타냅니다. 두번 째 값은 아래 것들 중의 하나입니다.:

Three-value syntax:

Values

<'flex-grow'>
flex item의 flex-grow 값을 설정합니다. 자세히 알려면 <number> 을 봐주세요. 음수는 잘못된 값으로 받아들입니다. 생략되면 Default 값은 1 입니다.
<'flex-shrink'>
Defines the flex-shrink of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.
<'flex-basis'>
flex item의 flex-basis 값을 설정합니다.  width 값이나 height 값을 받아들입니다. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted.
none
This keyword computes to 0 0 auto.

When using one or two unitless values, flex-basis changes from auto to 0. More information can be found in the draft for the Flexible Box Layout Module.

Formal syntax

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Example

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

Result

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex' in that specification.
Candidate Recommendation Initial definition

초기값as each of the properties of the shorthand:
적용대상flex items, including in-flow pseudo-elements
상속no
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
No support 20 — 61
Notes
Notes Flex items that are sized according to their content are sized using fit-content, not max-content.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 18 — 28
Disabled
Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Full support 10
Prefixed Notes
Prefixed Requires the vendor prefix: -ms-
Notes Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Opera Full support 12.1Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android ? Opera Android Full support 12.1Safari iOS Full support Yes
Full support Yes
Full support 7.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: dbwodlf3
최종 변경자: dbwodlf3,