요소의 여백 비율 지정하기

flex-grow - 요소의 안쪽 여백 확대하기

• flex-grow 속성을 사용하면 요소의 크기를 키웠을때 요소 안쪽 여백의 확대되는 비율 지정
• flex-grow 은 요소 안쪽 여백만 비율로 조정 전체 요소의 너빗값 비율 변경 X
• 전체 요소의 너빗값 변경하고 싶으면 flex 속성을 사용

See the Pen flex-grow: by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

flex-shirink - 요소의 안쪽 여백 축소하기

• flex-shirink 속성을 사용하면 요소의 크기를 줄였을 때 안쪽 여백의 감소 비율을 지정
• flex-grow 속성과 다르게 크기가 클수록 비율이 작아짐

See the Pen flex-shirink by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

flex - 전체 너빗값의 비율 조절하기

• flex 속성은 요소의 전체 너비값 비율을 조절

See the Pen flex by 신범식 (@ulqsqjpw-the-solid) on CodePen.