flex-grow / flex-shrink / flex-basis

 

📌 flex-grow

: container 내부에서 요소가 남은 공간을 얼만큼 차지할 수 있는지 비율로 설정

 

• 기본값 = 0 
  
  • flex-grow: 0; 👉 딱 컨텐츠 크기만큼만 공간을 차지함
  • 0보다 큰 값을 설정하면 남은 여백을 최대한 메우는 속성

 

• width 설정 X
• 자식 요소에 부여
• 반응형 웹 만들 때 유용

 

 

 

 

---

 

 

📌 flex-shrink

: container가 작아질수록 어떤 요소가 얼마나 축소될 지 비율로 설정

• ↔ flex-grow
• 줄어들 순서 설정 가능 ⭕
• 자식 요소에 부여

 

• 기본값 = 1 
  
  • flex-shrink: 0; 👉 아이템 축소 ❌
    1 이상의 값 👉 남은 공간에 따라 비례적으로 축소 ⭕
    
  • 값이 클수록 빨리 축소됨

 

 

 

---

 

 

📌 flex-basis

: flex 박스의 초기 크기(기본값)를 설정

 

 

✨flex-basis와 width의 차이

flex-basis는 주축(Main axis)를 갖는다

👉 flex 요소를 세로로 배치하면(flex-direction: column;), flex-basis는 높이(height)로 작용한다

 

 

 

• box1 크기의 초기값을 500px로 설정
  둘 다 flex-grow: 1;을 설정하면 최종 div 크기는 각각 달라짐
  (시작점이 서로 다르기 때문)

 

 

 

 

• flex-shrink: 0;를 설정하면
  flex-basis = min-width(최소 너비) 속성과 비슷해짐
  flex-shrink: 0이기 때문에 창을 아무리 줄여도 최소 크기는 기본값인 500px이 됨

 

 

 

 

• flex-grow: 0; + flex-shrink: 3;를 설정하면
  flex-basis = max-width(최대 너비) 속성과 비슷해짐
  flex-grow: 0이기 때문에 창을 아무리 키워도 500px을 넘지 않음

 

 

---

 

 

📌 flex

• 단축 속성: flex-grow + flex-shrink + flex-basis

.box {
    flex: 1 0 500px;
           =
    /* flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 500px; */
}

 

 

 

---

 

 

출처

노마드코더 CSS Layout 마스터클래스