(HTML/CSS)Flex-grow, Flex-shrink, Flex-basis 에 대해 알아보기

---

테스트 값 세팅

기본값 박스의 너비 50px로 설정

1. Flex-basis

basis는 Flex로 구성된 박스의 크기를 설정하는 최소 단위이다. 

쉽게말해 기본적으로 크기를 정해주고 만약 내용이 그 크기를 넘는다면 자연스럽게 늘어나게 된다.

 

아래의 이미지는 예시로 flex-basis를 이용하여 박스의 크기를 키워본 이미지이다.

 

width는 임의로 설정한 item의 기본값

Flex-basis : 80px (기본값: 50px 설정)

 

2. Flex-grow

grow는 basis 의 값보다 커질 수 있는지를 지정한다. 

 

• grow 에 1을 세팅한 경우

Flex-grow:1 (Flex-grow 의 기본값은 0)

1을 설정했을 때 부모요소에 맞춰 크기가 설정된다. 

 

0을 설정하면 부모요소의 너비만큼 기본값을 가지고 나머지 박스들이 크기를 나눠가지게 된다.

 

.item:nth-child(2){flex-grow: 0;}

• 1이상의 값들을 설정하면 크기를 비율로 나눠가진다고 생각하면 쉽다.

.item:nth-child(2){flex-grow: 2;}.item:nth-child(3){flex-grow: 2;}

 

 

3. Flex-shrink

shrink 는 grow와 반대라고 생각하면 쉽다. basis 값보다 작아질 수 있는지를 설정한다. 

기본값은 1로 만약 0보다 큰 정수가 들어간다면 일반적인 flex 요소처럼 basis보다 작아질 수 있게된다.

만약 basis보다 작아지지 않게 설정하고 싶다면 shrink 값을 0으로 설정하면 해당 flex요소의 너비값이 고정되게 된다.

결과 이미지

shirnk 0을 줬을때 1,3번은 basis 크기로 고정되고 2,4 가 각각 2 와 1만큼의 영역을 나눠 갖게 된다. 

 

---

4. Flex 축약형

      

      

      

    
    

      <css />
    
flex : 1 1 auto ; 
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */

flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */