flex
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
**`flex`** CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. `flex`는 `flex-grow`, `flex-shrink`, `flex-basis`의 단축 속성입니다.

시도해보기
-----

대부분의 경우, `flex`의 값에는 `auto`, `initial`, `none`이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.

기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. `min-width`나 `min-height` 값을 지정해 바꿀 수 있습니다.

구문
--


```css
/\* Keyword values \*/
flex: auto;
flex: initial;
flex: none;

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

/\* One value, length or percentage: flex-basis \*/
flex: 10em;
flex: 30%;

/\* 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` 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.

* **값이 한 개일 때**, 그 값은 다음 중 하나여야 합니다.
    + `<number>`를 지정하면 `<flex-grow>`입니다.
    + `<length>` 또는 `<percentage>`를 지정하면 `<flex-basis>`입니다.
    + `none`, `auto`, `initial` 중 하나를 지정할 수 있습니다.
* **값이 두 개일때**, 첫 번째 값은 `<number>`여야 하며 `<flex-grow>`가 됩니다. 두 번째 값은 다음 중 하나여야 합니다.
    + `<number>`를 지정하면 `<flex-shrink>`입니다.
    + `<length>`, `<percentage>`, 또는 `auto`를 지정하면 `<flex-basis>`입니다.
* **값이 세 개일 때**는 다음 순서를 따라야 합니다.
    1. `<flex-grow>` 에 사용할 `<number>`
    2. `<flex-shrink>` 에 사용할 `<number>`
    3. `<flex-basis>` 에 사용할 `<length>`, `<percentage>`, 또는 `auto`
### 값

`initial`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. `flex: 0 1 auto`와 동일합니다.

`auto`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. `flex: 1 1 auto`와 동일합니다.

`none`

아이템 크기가 각각의 `width`와 `height` 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. `flex: 0 0 auto`와 동일합니다.

`<'flex-grow'>`

플렉스 아이템의 `flex-grow`를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 `0`입니다.

`<'flex-shrink'>`

플렉스 아이템의 `flex-shrink`를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 `1`입니다.

`<'flex-basis'>`

플렉스 아이템의 `flex-basis`를 지정합니다. `0`을 지정하려면 `<flex-grow>` 또는 `<flex-shrink>`로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 `auto`입니다.


**참고:** 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, `<flex-basis>`의 값은 `auto`가 아니라 `0`이 됩니다. 더 자세한 정보는 플렉시블 박스 레이아웃 모듈 초안에서 확인할 수 있습니다.

### 형식 구문
```

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

예제
--


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

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

#flex-container > .raw-item {
  width: 5rem;
}
```



```html
<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>
```


```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```


```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 적용대상 | flex items, including in-flow pseudo-elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `flex-grow`: as specified
* `flex-shrink`: as specified
* `flex-basis`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow`: a number
* `flex-shrink`: a number
* `flex-basis`: a length, percentage or calc();
 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 플렉스박스 안내서: *Basic Concepts of Flexbox*
* CSS 플렉스박스 안내서: *Controlling Ratios of flex items along the main axis (en-US)*