[웹사이트] flex-grow, flex-shrink, flex-basis

flex

• flex는 레이아웃 방식
• 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.

flex-grow, flex-shrink, flex-basis를 한 줄에 쓰는 속성

(1) 값이 한 개일 때,

• 단위가 없으면 flex-grow 값이 된다.
• 단위가 있으면 flex-basis 값이 된다.

(2) 값이 두 개일 때,

• 첫번째 값은 단위가 없는 숫자여야 한다. 또한, 첫번째 같은 flex-grow가 된다.
• 두 번째 값은 단위가 없으면 flex-shrink, 단위가 있거나 auto면 flex-basis가 된다.

(3) 값이 세 개일 때,

• 첫 번째 값은 flex-grow (단위 없어야 됨)
• 두 번째 값은 flex-shrink (단위 없어야 함)
• 세 번째 값은 flex-basis 값이 된다. (단위 있거나 auto)

flex-grow

flex-basis 속성으로 정한 플랙스박스 아이템의 기본 너비를 자동으로 늘어나게 한다.

• flex item의 증가 너비 비율을 설정한다.
• item들이 차지할 너비들에 대한 증가형 숫자를 지정한다.
• 속성값은 0과 양의 정수를 사용한다.
• 기본값은 0이며, 기본값을 가지고 있을 때는 item의 너비가 커지지 않고 원래 크기르 유지한다.
• 속성값이 1이상일 때 item의 크기에 상관없이 유연한 박스로 변경되고, 원래 너비에 상관없이 너비가 확장되며, container의 빈 공간으로 채우게 된다,
• 0: 기본값, 아이템이 포함된 container의 크기가 아이템들의 크기보다 클 때 여유공간에 아이템을 늘리지 않는다.
• 1: 아이템이 포함된 container의 크기가 아이템들의 크기보다 클 때 여유공간에 아이템을 늘린다. (숫자는 각 비율)

flex-shrink 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 줄어들도록 해서 행 안에 적절한 너비로 배치되도록 맞춘다.

• flex items의 감소 너비 비율을 설정한다.
• item들이 차지할 너비들에 대한 감소형 숫자를 지정한다.
• 속성값은 0과 정수를 사용
• container의 전체 너비안에서, 원래 너비에 상관없이 축소되어 공간을 챙춘다.
• 0: 아이템이 포함된 container의 크기보다 아이템이 클 때 아이템을 줄이지 않음
• 1 : 기본값, 아이템이 포함된 container의 크기보다 아이템이 클 때 아이템을 줄인다.(숫자는 각 비율)

flex-basis 속성으로 items의 너비(가로)의 길이를 지정한다. => 기본 너비 설정

• 값 : auto, 숫자
• flex-basis:auto; || flex-basis: 0; || flex-basis: 200px