목록CSS3 (1)
너와 나의 프로그래밍

요즘 프론트엔드 개발을 하면서 “display: flex” 속성을 활용해서 퍼블리싱을 하는 경우가 굉장히 많다. flex가 나오면서 정말 어려웠던 가로/세로 가운데 정렬도 쉽고 Element의 배치도 굉장히 쉬워지고 정말 많이 좋아졌지만 이놈의 “height: 100%”의 고질적인 문제를 참 해결하기 힘들었다. 개발을 하면서 부모 flex-container에서 height값을 주지 않고 자식의 height 값으로 부모의 height값을 자동으로 조절해주는 기능을 만들게 되었는데 이번에 찾아본 결과 “flex-grow: 1”이라는 속성을 찾아냈고 그 속성으로 height: 100% 문제를 해결했다. 문제 😳 child에 height: 100% 속성을 부여해줘도 전혀 움직이지 않고 높이가 제각각인 문제가 발..
Front-End/HTML5 & CSS3
2023. 1. 29. 14:55