HTML5 & CSS3 - flex-grow (height: 100%)

 

요즘 프론트엔드 개발을 하면서 “display: flex” 속성을 활용해서 퍼블리싱을 하는 경우가 굉장히 많다.

flex가 나오면서 정말 어려웠던 가로/세로 가운데 정렬도 쉽고 Element의 배치도 굉장히 쉬워지고 정말 많이 좋아졌지만 이놈의 “height: 100%”의 고질적인 문제를 참 해결하기 힘들었다.

개발을 하면서 부모 flex-container에서 height값을 주지 않고 자식의 height 값으로 부모의 height값을 자동으로 조절해주는 기능을 만들게 되었는데 이번에 찾아본 결과 “flex-grow: 1”이라는 속성을 찾아냈고 그 속성으로 height: 100% 문제를 해결했다.

 

문제 😳

Child Element의 높이가 제각각이다.

Child CSS 속성에 height: 100% 부여

 

child에 height: 100% 속성을 부여해줘도 전혀 움직이지 않고 높이가 제각각인 문제가 발생하였다.

처음에 parent css에 height: 100% 속성을 부여해줘서 해결하려고 했지만 내가 원하는 결과값이 아니기 때문에 자식 속성에만 꼭 높이 값으로 부모의 공간을 꽉 채워야 했다.

 

해결 😃

height: 100%을 빼고 flex-grow:1 속성을 부여

 

height: 100% 속성 대신에 flex-grow: 1 속성을 부여해 문제를 해결하였다.

flex-grow는 flex-container안에서 할당 가능한 자식 flex-items의 대한 공간의 정도를 설정할 수 있다.

만약 1이라면 모든 자식들의 공간이 일정하게 꽉 차게 나타나게 된다.

위 예제는 여러개의 자식들 중에서 개별 contents에 따라 유동적으로 늘어나는 높이를 한꺼번에 맞추기 위한 예제다.