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.

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

같이 보기

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