클론 코딩을 진행하던 중 잘 정리되어있지 않거나 몰랐던 css를 적어보려고 한다.

flex-shrink

한번도 사용하지 않았던 속성인데 아이템이 flex-basis의 값보다 작아질 수 있는 지 여부를 결정한다. flex-shrink에 들어가는 값은 0보다 큰 경우 유연한 박스이며 flex-basis보다 작아진다. 기본값이 1이기 때문에 따로 설정 하지 않아도 flex-basis보다 작아질 수 있다.

반면 0인 경우 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 만들 수 있다. 이 때 고정 크기는 width로 설정한다.

flex-basis

속성은 flex 아이템의 기본 사이즈를 지정하는 속성

box-sizing

• content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다.
• border-box : 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.

출처:https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9