정의 및 사용 방법

flex 속성은 플렉스 레이아웃에서 플렉스 컨테이너(부모)의 사용 가능한 공간에 맞춰 플렉스 아이템의 기준 크기와 확장 및 축소 비율을 한 번에 설정합니다.

flex는 플렉스 아이템의 '주축 방향의 크기'를 결정하는 다음의 구성 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

flex 속성의 구성 속성
flex-basis 플렉스 아이템의 크기를 계산할 때 사용하는 주축 방향의 기준(basis) 크기를 지정합니다.
flex-grow 플렉스 컨테이너(부모)의 남는 공간을 플렉스 아이템들이 나누어 커질 때, 해당 플렉스 아이템이 다른 플렉스 아이템에 비해 상대적으로 얼마나 커질지 결정하는 비율을 설정합니다.
flex-shrink 플렉스 컨테이너(부모)의 부족한 공간을 플렉스 아이템들이 나누어 축소시킬 때, 해당 플렉스 아이템이 다른 플렉스 아이템에 비해 상대적으로 얼마나 축소될지 결정하는 비율을 설정합니다.

주축 방향의 크기란
플렉스 컨테이너(부모)의 flex-direction 속성으로 지정된 플렉스 아이템의 배치 방향이 '가로 축'일 때는 '너비'를, '세로 축'일 때는 '높이'를 말합니다.

꼭 알아두세요!
플렉스 레이아웃의 큰 특징 중 하나는 플렉스 아이템의 크기를 유연하게 조정할 수 있다는 점입니다.
플렉스 아이템의 주축 방향의 크기는 flex-basis, flex-grow, flex-shrink 속성이 함께 작동하여 최종 크기를 결정한다는 것을 알아야 합니다.

  1. 브라우저는 먼저 플렉스 아이템들의 flex-basis 값을 합산하여 플렉스 컨테이너(부모) 내의 남는 공간을 파악합니다.
  2. 남는 공간이 있다면, 플렉스 아이템들은 각각 flex-grow 속성의 설정 값에 따라 비율대로 나누어 크기를 키우거나 그대로 둘지를 결정하며,
  3. 남는 공간이 없이 부족하다면, 플렉스 아이템들은 각각 flex-shrink 속성의 설정 값에 따라 비율대로 나누어 크기를 축소하거나 그대로 둘지를 결정합니다.

플렉스 아이템의 크기를 제어할 때는 각 속성을 따로 사용하는 것보다는
flex 단축 속성을 사용하여 유연한 크기 조정에 필요한 모든 구성 속성을 한 번에 제어하는 것이 좋습니다.
flex 단축 속성은 생략된 구성 속성의 값을 함께 재설정(reset)하므로, 예상하지 못한 크기 계산 결과를 줄이는 데 도움이 됩니다.

특징

기본 예제

HTML 
<div class="flex-container">
    <div class="item item-1">item-1</div>
    <div class="item item-2">item-2</div>
    <div class="item item-3">item-3</div>
</div>
CSS 
.flex-container { /* 플렉스 컨테이너 */
    display: flex;
    border: 4px dashed silver;
    padding: 5px;
    flex-direction: row; /* 플렉스 아이템의 배치 방향이 '가로 축'이므로
                            플렉스 아이템의 주축 방향의 크기는 '너비'가 됨 */
}
.item { /* 플렉스 아이템 */
    padding: 1em;
    border: 4px solid blue;
    background-color: yellow;
}
.item-1 {
    /* flex-grow=0, flex-shrink=0, flex-basis=100px */
    flex: 0 0 100px;
}
.item-2 {
    /* flex-grow=0, flex-shrink=1, flex-basis=10px */
    flex: 0 1 10px;
}
.item-3 {
    /* flex-grow=1, flex-shrink=1, flex-basis=auto */
    flex: 1 1 auto;
}
실제 적용된 모습

형식 구문

CSS 
selector {
    flex: <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>
}

/* 또는 */
selector {
    flex: none
}

기호 읽는 법:

  • ?: 이 속성은 생략할 수 있습니다.
  • ||: 앞뒤 순서가 바뀌어도 괜찮습니다.

값

flex 속성의 값
<'flex-grow'> flex-grow 속성의 값에 해당합니다.
  • 숫자를 값으로 사용할 수 있습니다.
  • 0 이상의 실수(정수와 소수점 가능)를 사용합니다. 음수 값은 유효하지 않습니다.
  • flex 속성에서 이 값을 생략하면 0으로 설정됩니다.
<'flex-shrink'> flex-shrink 속성의 값에 해당합니다.
  • 숫자를 값으로 사용할 수 있습니다.
  • 0 이상의 실수(정수와 소수점 가능)를 사용합니다. 음수 값은 유효하지 않습니다.
  • flex 속성에서 이 값을 생략하면 1로 설정됩니다.
<'flex-basis'> flex-basis 속성의 값에 해당합니다.
  • content: 플렉스 아이템의 내용에 따라 자동으로 크기가 조정됩니다.
  • <'width'>: width 속성에서 사용하는 값의 종류들(<길이> | <백분율(%)> | <키워드>)을 동일하게 사용 가능합니다.
    • <길이>: 길이 값은 양수나 0입니다. (음수 값은 유효하지 않습니다.)
      • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
      • em - 현재 요소의 font-size를 1em의 기준으로 합니다.
      • vh
      • vw
      • px
      • CSS에서 사용 가능한 절대적 길이 단위
    • <백분율(%)>: 백분율 값은 플렉스 컨테이너(부모)를 기준으로 결정됩니다. 플렉스 컨테이너(부모)의 크기가 무한대인 경우에는 content 값이 대신 사용됩니다.
    • <키워드>: auto, max-content, min-content, fit-content 키워드를 사용할 수 있습니다.
      • auto는 주축 방향이 '가로 축'이면 width 값을, '세로 축'이면 height 값을 사용합니다. 해당 값 또한 auto인 경우에는 content 값이 대신 사용됩니다.
      • 주의하세요!
        auto가 아닐 경우 주축 방향이 '가로 축'이면 width 값이, '세로 축'이면 height 값을 지정하더라도 해당 속성들은 플렉스 아이템의 적용 대상이 되지 않습니다.
  • flex 속성에서 이 값을 생략하면 0%로 설정됩니다.
주의하세요!
0을 지정하려면 <'flex-grow'> 또는 <'flex-shrink'>로 읽히지 않도록 단위(예: 0%, 0px)를 명시하는 것이 좋습니다.
none flex: 0 0 auto와 동일하게 설정됩니다.

값 지정하기

flex 속성은 세 개, 두 개, 한 개의 값으로 지정할 수 있습니다.

세 개 값

띄어쓰기로 구분하여 반드시 <'flex-grow'> <'flex-shrink'> <'flex-basis'> 순서대로 값을 지정해야 합니다.

CSS - 세 개 값 구문 
/* flex-grow=0, flex-shrink=0, flex-basis=100px */
flex: 0 0 100px;

/* flex-grow=0, flex-shrink=1, flex-basis=10px */
flex: 0 1 10px;

/* flex-grow=1, flex-shrink=1, flex-basis=auto */
flex: 1 1 auto;

두 개 값

띄어쓰기로 구분하여 첫 번째 값은 반드시 <'flex-grow'>를 지정하고, 두 번째 값은 <'flex-shrink'> 또는 <'flex-basis'>를 지정해야 합니다.

지정하는 두 번째 값에 따라 고려해야 할 점이 있습니다.

  • <'flex-shrink'>가 두 번째 값이면, 생략한 <'flex-basis'>는 0%로 설정됩니다.
  • <'flex-basis'>가 두 번째 값이면, 생략한 <'flex-shrink'>는 1로 설정됩니다.
    • 이때, <'flex-basis'> 값을 0으로 지정하려면, <'flex-shrink'>의 값으로 읽히지 않도록 반드시 단위(예: 0%, 0px)를 명시해야 합니다.
CSS - 두 개 값 구문 
/* flex-grow=1, flex-shrink=2, flex-basis=0% */
flex: 1 2;

/* flex-grow=1, flex-shrink=1, flex-basis=0px */
flex: 1 0px;

한 개 값

한 개의 값만을 지정할 수 있습니다. 그 의미는 다음과 같습니다.

  • 0 이상의 실수(정수와 소수점 가능)를 사용해서 지정하면 그 값은 <'flex-grow'>입니다.
    • 생략한 <'flex-shrink'>는 1로 설정됩니다.
    • 생략한 <'flex-basis'>는 0%로 설정됩니다.
  • width 속성에서 사용하는 값의 종류들(<길이> | <백분율(%)> | <키워드>)를 사용해서 지정하면 그 값은 <'flex-basis'>입니다.
    • 이때, <'flex-basis'> 값을 0으로 지정하려면, <'flex-grow'>의 값으로 읽히지 않도록 반드시 단위(예: 0%, 0px)를 명시해야 합니다.
    • 생략한 <'flex-grow'>는 0으로 설정됩니다.
    • 생략한 <'flex-shrink'>는 1로 설정됩니다.
  • none 값을 지정할 수 있습니다.
    • flex: 0 0 auto와 동일하게 설정됩니다.
  • CSS의 모든 속성에서 사용할 수 있는 글로벌 값들(inherit, initial, revert, revert-layer, unset)을 지정할 수 있습니다.
CSS - 한 개 값 구문 
/* flex-grow=1, flex-shrink=1, flex-basis=0% */
flex: 1;

/* flex-grow=0, flex-shrink=1, flex-basis=100px */
flex: 100px; 

/* flex-grow=0, flex-shrink=1, flex-basis=auto */
flex: auto;

/* flex-grow=0, flex-shrink=0, flex-basis=auto */
flex: none;

/* 글로벌 값 */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;

유연하지 않은 플렉스 아이템 만들기

플렉스 레이아웃의 큰 특징 중 하나는 플렉스 아이템의 크기를 유연하게 조정할 수 있다는 점이지만, 때때로 이 유연함을 없애야 할 때가 있습니다.

플렉스 아이템의 크기가 플렉스 컨테이너(부모)의 사용 가능한 공간에 맞춰 확장되거나 축소되지 말야야 하는 완전히 비유연적이어야 한다면 <'flex-grow'>와 <'flex-shrink'>가 0이면 됩니다.

예제

다음은 플렉스 아이템의 크기를 완전히 비유연적으로 만드는 예제입니다.
플렉스 레이아웃의 장점을 활용하면서도 플렉스 아이템의 너비나 크기를 상황에 맞게 명시적으로 지정해야 할 때 유용합니다.

HTML 
<div class="flex-container">
    <div class="item item-1">item-1</div>
    <div class="item item-2">item-2</div>
    <div class="item item-3">item-3</div>
</div>
CSS 
.flex-container { /* 플렉스 컨테이너 */
    display: flex;
    border: 4px dashed silver;
    padding: 5px;
    flex-direction: row; /* 플렉스 아이템의 배치 방향이 '가로 축'이므로
                            플렉스 아이템의 주축 방향의 크기는 '너비'가 됨 */
}
.item { /* 플렉스 아이템 */
    padding: 1em;
    border: 4px solid blue;
    background-color: yellow;
    /* 유연성을 제거하여 폭을 고정함 (flex: 0 0 auto) */
    flex: none;
}

/* flex-basis: auto는 주축 방향이 '가로 축'이면 width 값을 너비의 크기로 사용 */
.item-1 {
    width: 50px;
}
.item-2 {
    width: 100px;
}
.item-3 {
    width: 150px;
}
실제 적용된 모습

flex 속성 값에 대한 제약 조건

flex 속성 값을 설정하더라도, 주축 방향에 대한 플렉스 아이템의 크기에 대한 제약 조건이 있으면, 주축 방향의 크기 결정은 제약 조건을 준수합니다.
플렉스 아이템의 크기에 대한 제약 조건은 다음과 같습니다.

  • 주축 방향이 '가로 축'이면
  • 주축 방향이 '세로 축'이면
  • flex-basis 값이 auto로 설정되어 있고 aspect-ratio가 설정되어 있는 경우

형식 정의

flex 속성의 형식 정의
초깃값 0 1 auto
적용 요소 플렉스 아이템
상속 아니오
애니메이션

브라우저 호환성

flex 속성 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
flex 29 12 20 9
content 94 94 61 15.4
fit-content 94 94 94 16
max-content 94 94 66 16
min-content 94 94 66 16

명세서

flex 속성의 명세서 사양
명세서 사양
flex CSS Flexible Box Layout Module Level 1
#flex-property

같이 보기