CSS flex 속성 – flex-grow, flex-shrink, flex-basis를 한 번에 설정하기

CSS의 flex 속성은 flex-grow, flex-shrink, flex-basis 세 가지 하위 속성을 하나의 선언으로 동시에 설정할 수 있는 축약형(shorthand) 속성입니다.

flex 속성의 기본 문법

flex: flex-grow flex-shrink flex-basis;

flex-grow: 남은 공간을 항목이 얼마나 넓게 차지할지 비율로 지정합니다.
flex-shrink: 공간이 부족할 때 항목이 얼마나 줄어들 수 있는지 지정합니다.
flex-basis: 항목의 초기 크기를 지정합니다.

예제

아래 예제에서는 Q4 항목에 flex: 20 0 350px을 적용하여, 다른 항목보다 훨씬 많이 늘어나고(flex-grow: 20) 줄어들지 않으며(flex-shrink: 0), 기본 크기가 350px가 되도록 설정했습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div style = "flex: 20 0 350px">Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
         <div>Q9</div>
      </div>
    </body>
</html>

자주 사용하는 flex 값

flex: initial; → 0 1 auto와 동일하며 기본값입니다.
flex: auto; → 1 1 auto와 동일하며, 항목이 남은 공간을 균등하게 나눠 가집니다.
flex: none; → 0 0 auto와 동일하며, 항목이 늘어나거나 줄어들지 않습니다.
flex: 1; → 1 1 0%와 동일하며, 반응형 레이아웃에서 가장 널리 쓰이는 방식입니다.

flex 속성을 활용하면 복잡한 미디어 쿼리 없이도 화면 크기에 유연하게 대응하는 레이아웃을 손쉽게 구성할 수 있습니다.