Flex Items 속성 - flex-grow

Item의 증가 너비 비율을 설정한다.

숫자가 크면 더 많은 너비를 가진다.

Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.

값	의미	기본값
숫자	Item의 증가 너비 비율을 설정	0

flex-grow: 증가너비;

모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있다
예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 된다.

 

너비의 비율 설정

 

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

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

.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

.item1{
  flex-grow:1;
}
.item2{
  flex-grow:2;
}

다음과 같이 선언해서 사용할 수 있다.

 

비율의 문제점

비율의 문제점

사진에서 보면 알 수 있는것은 비율의 문제점이라는 것이다. 여기서 확인할 수 있는 문제점은 2가지이다.

 

첫번째, 일단 3번박스같은경우는 소스코드에서 보면 알 수 있듯이 기본값너비를 100px로 잡았기 때문에 1번박스와 2번박스에 비율을 설정하더라도 그 크기를 유지한다.

 

두번째, 소스코드에서보면 1번박스는 flex-grow:1 이고 2번박스는 flex-grow:2인데, 2번박스가 1번박스보다 2배 크지 않다는걸 알 수 있다. 왜냐하면 이미 .container .item에서 박스크기를 설정해 놓았기 때문에 비율을 설정하는데 있어서 오류가 발생한다.

 

 

 

비율의 문제점 해결방법

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

.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

.item1{
  flex-grow:1;
}
.item2{
  flex-grow:2;
}
.item3{
  width: 100px;
}

다음과 같이 .container .item에서 width를 설정하지 않고 따로 비율설정하지 않을 item3에 크기 width:100px을 선언했다. 그러면 item1과 item2의 박스는 비율이 2배로 크게 나오게 되는걸 알 수있다. 또한 장점으로는 화면의 크기를 줄였다 들려도 item3박스는 너비의 차이가 없다.

2번박스는 1번박스보다 2배크고, 3번박스는 크기변화가 없다.