CSS 속성 / 값 모음 (1)

flex-shrink

flex-shrink는 Flexbox 레이아웃에서 사용되는 CSS 속성 중 하나이다.

속성은 Flex 컨테이너 내부의 요소들이 감소하는 비율을 지정한다. 즉, 요소들의 크기가 Flex 컨테이너의 공간보다 클 때, 각 요소가 얼마나 줄어들어야 하는지를 제어하는 데에 사용된다. 0보다 큰 숫자를 지정할 수 있으며 기본값은 1이다

align-items

Flexbox 레이아웃을 사용할 때 요소들을 수직 축 (주로 세로 방향)을 기준으로 가운데로 정렬하는 기능을 제공한다. 이 속성은 부모 요소에 적용하여 그 안에 있는 자식 요소들을 수직 축을 기준으로 정렬하는 데에 사용된다. 값의 종류는 아래와 같다.

flex-start - 요소들을 수직 축의 시작점에 정렬 (상단 정렬)

flex-end - 요소들을 수직 축의 끝점에 정렬 (하단 정렬)

center - 요소들을 수직 축의 가운데에 정렬

baseline - 요소들을 텍스트의 기준선을 기준으로 정렬

stretch - 요소들을 수직 축의 길이에 맞게 늘림 (기본값)

inherit

css의 스타일 속성값 중 inherit은 부모 태그의 값과 동일하게 상속해 줌을 뜻한다.

일반적으로, HTML 문서에서 자식 요소들은 부모 요소로부터 여러 속성 값을 상속받는다. font-size, height 등 다양한 값에 지정시킬 수 있다.