본문 바로가기

너와 나의 프로그래밍

너와 나의 프로그래밍

  • 분류 전체보기 (116)
    • Back-End (13)
      • Java Example (5)
      • Spring Framework (8)
    • Front-End (68)
      • TypeScript (6)
      • JavaScript (14)
      • Next.js & React.js (30)
      • Vue.js (8)
      • HTML5 & CSS3 (4)
      • JQuery (6)
    • Etc. (35)
      • Development Etc. (17)
      • Yoon's Life (18)
Guestbook
Today
Total
관리 메뉴
  • 글쓰기
  • 방명록
  • RSS
  • 관리

목록flex (1)

너와 나의 프로그래밍

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

요즘 프론트엔드 개발을 하면서 “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
이전 Prev 1 Next 다음

Blog is powered by kakao / Designed by Tistory

티스토리툴바