반응형
Flex-shrink
-
CSS Flexbox : Flex-grow, Flex-basis컴퓨터 알아가기/HTML CSS 2021. 4. 20. 19:30
지난시간까지 Flexbox의 성질에 대해 알아 보았습니다. 저처럼 기본에 대한 내용만 확인하고자 하면 지난시간까지 한 Justify-content는 가로로 위치를 배치하는 것이고 Align-items는 세로로 위치를 배치하는 개념이다라고 생각하면 될 것 같습니다. 이제부터는 하위 Class에 Flex 속성을 주어 자체가 어떻게 변할 수 있는지 좀 더 알아보도록 하겠습니다. ▒ Flex-grow Flex-grow 속성은 하위항목에 적용하여 상위 Class(container)영역안에서 flexible하게 위치를 자동으로 조정하도록 합니다. 글 보다는 다음 예제를 통해서 이해를 하도록 하겠습니다. 우선 HTML 에 3개의 박스 영역을 만듭니다. CSS를 다음과 같이 해봅니다. 이제 영역의 색상을 달리하여 이해..