목록flex-grow (1)

Enjoy Programming

Flexbox.5 flex-grow, flex-shrink

자 이번엔 flex-shrink와 flex-grow를 알아보겠다. 이것도 flex-box의 자식요소들이 사용하는 속성이다 1. flex-shrink flex-shrink의 경우 예를 들어 플렉스 박스의 크기가 정해져있더라도 브라우저의 크기에 따라 flexbox는 유동적으로 사이즈가 찌그러지거나 그대로 유지할 수 있다. flex-box들을 일정값을 주더라도 화면 크기가 작아지면 이 박스들은 일정 비율로 작아지며 그 라인에 채워지는 것을 볼 수 있는데 어떤 박스가 어떤비율로 줄어들지 아니면 유지할지를 결정하는 것이다. 예를 들어 width: 300px height: 200px 의 박스 세개가 있고 이들을 flexbox로 만들었다. 가운데 요소만 블랙으로 만들어주었다 기본적으로 모든 박스는 flex-shrin..
CSS 2021. 4. 17. 21:34
이전 Prev 1 Next 다음