flex-grow

flex-grow

부모 컨테이너 안에 있는 자식 컨테이너 간의 비율을 조정할 수 있다. navigation 바의 로고 이미지와 네비게이션 탭 간의 크기 비율을 설정할 때 유용한 프로퍼티가 될 수 있다.

.box:first-child {
  background-color: tomato;
  flex-grow: 2;
}

.box:last-child {
  background-color: teal;
  flex-grow: 1;
}

 

예를 들어 하나의 컨테이너 안에 2개의 자식 요소가 들어가있다고 했을 때 위와 같이 flex-grow에 설정을 주면 2:1의 비율로 설정된다. flex-grow의 기본값은 0이다.