[CSS] flex속성 정리

컨테이너에 flex속성 부여했을 시 item에 부여하는 flex속성

 

flex : [flex-grow] [flex-shrink] [flex-basis] 

-flex-grow :

여백이 있는경우 item이 다른 item들과 비교해 상대적인 크기를 얼마나 가질것인지.

 = 신장률

보통 1,2,3 등 정수비로 지정함. 생략할 경우 1

-flex-shrink:

flex container에 flex item이 전부 들어가지 못하는 경우, 다른 item에 비해 비교해 얼마나 줄일지 설정.

 = 압축률

보통 1,2,3 정수비, 생략한 경우 1 수치가 클수록 폭이 좁아짐.

-flex-basis:

Flex항목의 주축방향 크기(item의 고정 값 width, height 값 주듯 주면 크기고정)

 

 

결론: flex속성이용 flex container내에서 flex item들의 비율을 조정할 수 있다.