[CSS3] display : flex ② Flex 아이템에 적용되는 속성들

 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 

 

정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow

display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 

 

 

이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. 

 

See the Pen KKzePBg by joonho lee (@goldycoder) on CodePen.

 

박스의 기본 크기 정하기 : Flex-basis

 설명 그대로, 아이템 박스들의 기본 크기를 정해준다. 

 

박스의 기본 크기보다 값을 줄일 때 : Flex-shrink 

 이 요소는 Flex-basis와 같이 썼을 때, 의미가 있다.  숫자 값을 value로 갖는데, 기본 값인 1을 포함하여 1보다 크거나 같은 값을 갖으면 Flex-basis보다 크기가 더 작아지게 만든다. 

 

 

내용출처 및 참고 사이트

CSS flex-box

이번에야말로 CSS Flex를 익혀보자