[CSS_study] flex-grow, flex-shrink

* flex-grow, flex-shrink는 child(자식)에게 줄 수 있는 property이다.

 

* flex-shrink

• flexbox가 쥐어짤 때, element의 행동을 정의함
• element 중 특정 element만 덜 줄어들거나, 더 줄어들게 할 수 있음 
  • ex) flex-wrap: nowrap일때, 화면이 작아지면 width가 설정되어있어도 줄어든다.
• flex-shrink: 1; (기본값이 1이다.)
• flex-shrink: n(정수); --> 여러 개

* flex-grow

• shrink와 반대, 화면이 늘어남에 따라 box 크기가 얼마나 늘어날까?
• 남아있는 공간을 가져옴 (space를 없애고)
  • 즉, 남아있는 공간, 여백이 있을 때만 grow 가능
• 화면이 커질 때, element도 함께 커지길 원할 때 사용할 수 있음
• flex-grow property가 0인 상태거나, 따로 정의되지 않았다면, 화면이 커져도 각 element 크기가 커지지 않음
  (여백만 늘어나게 됨)

* flexbox의 flex-wrap이 default 값(no-wrap)인 상태일 때는 일정한 비율로 children 요소들이 너비가 줄어들지만 flex-shrink는 말 그대로 shrink이며 원래 크기의 n배만큼 줄어든다.

 

flexbox 안의 children 요소들의 flex-shrink 값은 1이 default이며 flex-shrink 값을 매긴다면 각 요소는 축소 시

  > (원래 요소의 너비) * (해당 요소의 flex-shrink 값 / 전체 요소들의 flex-shrink 값의 총합) 정도 축소가 되겠다.

---

* flex-shrink 예시코드

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: nowrap
}

.child:nth-child(2) {
  background: #000;
  flex-shrink: 2;
}

 

* flex-grow는 flexbox의 children 요소들이 원래 너비 상태를 기준으로 너비를 키우게 되면 남는 여백들을 가지고 flex-grow 값을 가진 요소들에게 너비를 추가시킨다.

 

모든 요소들의 flex-grow 값은 0이 default이며 flex-grow 값을 매긴다면
  > (원래 너비) + (남는 공백 * (해당 요소의 flex-grow 값 / 전체 요소의 flex-grow 값의 총합)) 정도 너비를 얻게 될 것이다.

---

* flex-grow 예시 코드

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: nowrap
}

.child:nth-child(2) {
  background: #000;
  flex-grow: 1;
}

 

* flex-grow와 flex-shrink는 반응형 디자인(responsive design)을 할 때 유용하다.