🥝 flex-grow

• Item의 증가 너비 비율을 설정
• 숫자가 크면 더 많은 너비를 가진다.
• Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
• 전체 Container의 너비를 알지 못하더라도 그 안의 각각의 Item들의 너비 비율을 설정함으로 배치를 할 수 있다.
• 기본값 0

.container {
  border: 4px solid black;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 4px solid gray;
  border-radius: 10px;
  background-color: coral;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1 {
  flex-grow: 1;
}

👉🏻 Item1은 (width,height값을 무시하고) 1/1 비율을 차지하게 되는데 Item2와 Item3이 w100px, h100px 값을 가지고 있으므로 그를 제외한 자리를 모두 차지한다.

.container {
  border: 4px solid black;
  display: flex;
}

.container .item {
  //width: 100px;
  height: 100px;
  border: 4px solid gray;
  border-radius: 10px;
  background-color: coral;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}
.item3 {
  width: 100px;
}

👉🏻 Item(공통)의 width값을 제거 후 Item3에게만 width값을 부여하면 Item1과 Item2는 1:2비율이 된다.

.container {
  border: 4px solid black;
  display: flex;
}

.container .item {
  height: 100px;
  border: 4px solid gray;
  border-radius: 10px;
  background-color: coral;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1 {
  flex-grow: 1;
}
.item2 {
  width: 100px;
} 

👉🏻 Item2에만 width값을 준다. (Item1은 1/1비율)
👉🏻 장점! Container(브라우저 창)이 늘어나고 줄어들 때 Item2의 영역은 변함이 없고 Item1의 영역만 가변한다.