[CSS] flex 속성

CSS에서 flex속성은 해당 item이 속한 컨테이너의 공간을 어떻게 차지할지 정의할 수 있다. 하나의 컨테이너에 세 개의 박스가 있을 때 flex속성을 통해 공간을 분배할 수 있을 것이다.

---

아래의 그림은 검정 테두리 안에 세 개의 박스가 display:flex의 형태로 정렬되어 있는 것이다. 이 상태에서 flex속성을 이용하여 공간을 분배할 것이다. flex 속성에는 기본적으로 flex-grow, flex-shrink, flex-basis가 존재한다.

 

▶ flex-grow

컨테이너 박스가 커질 때 item들이 어떤 비율로 커질지 지정하는 속성, 또한 어떤 비율로 공간을 차지할지 지정하는 속성

▶ flex-shrink

컨테이너 박스가 작아질 때 item들이 어떤 비율로 축소될지 지정하는 속성

▶ flex-basis

초기 컨테이너 안에서 item들이 차지하는 크기를 지정하는 속성

 

▶ flex-grow를 box1: 1, box2: 2, box3: 2로 지정했을 때

처음 컨테이너가 작았을 때는 1:1:1 비율로 공간을 차지하는 것을 확인할 수 있다. 이후 컨테이너가 커졌을 때 1:2:2의 비율로 공간을 차지하게 되었다.

 

▶ flex-shrink를 box1: 1, box2: 2, box3: 2로 지정했을 때

아래에서 첫 번째 그림은 컨테이너가 작아지기 전 1:1:1 비율의 크기로 존재하는 것을 확인할 수 있다. 이후 컨테이너 크기를 줄였을 때 1:2:2 비율로 크기가 작아진 것을 알 수 있다.

 

보통 flex-grow, flex-shrink, flex-basis는 flex로 축약해서 사용되며 속성의 개수에 따라 그 의미가 달라집니다.

▶ flex에 속성이 1개일 때

- 숫자로 지정하면 flex-grow가 정의됩니다.

- 길이나 %로 지정하면 flex-basis가 정의됩니다.

 

▶ flex에 속성이 2개일 때

- 첫 번째 값은 숫자로 지정하고 flex-grow를 정의하게 됩니다.

- 두 번째는 숫자로 지정했을 때 flex-shrink, 길이나 %로 지정하면 flex-basis가 정의됩니다.

 

▶ flex에 속성이 3개일 때

- flex-grow, flex-shrink, flex-basis가 순서대로 정의됩니다.

---

위의 그림은 아래의 CSS처럼 각각의 box에 flex를 정의한 것을 출력한 결과이다. 하나의 컨테이너에 여러 개의 item들이 포함되고 item들을 적절한 비율로 배치를 해야 할 때 유용하게 사용할 수 있을 것이다.

.box1{
    background-color: red;
    flex:1 1 60%;
}
.box2{
    background-color: blue;
    flex:1 1 30%;
}
.box3{
    background-color: green;
    flex:1 1 10%;
}