(HTML, CSS) items 속성값들 (flex-grow,flex-shrink, flex-basis,order)

flex-grow 컨테이너를 꽉 채우기 위해 늘어난다.

flex-grow를 사용하지 않으면 페이지가 작아지던 커지던 일정한 사이즈를 유지하지만,

flex-grow를 사용하면 페이지에 맞춰 그에 해당하는 사이즈를 유지한다.

item1에 flex-grow:3

item 2에 flex-grow:1

item3에 flex-grow:1

적용된 모습 item 1은 3배만큼 커진다.

flex-shrink 페이지가 작아지면 어떻게 적용할지 지정한다.

페이지가 줄어들 때 flex-shrink: 숫자만큼 주어 줄어들 경우 어떠한 사이즈로 줄어들지 정해준다.

기본값은 0이다.

페이지가 줄어들 때 flex-shrink:3으로 준 item1은 3배로 줄어든다.

flex-basis 아이템들이 공간을 얼마나 차지해야 하는지 세부적으로 도와주는 역할

기본적으로 flex-basis: auto를 사용한다.

item1에 flex-basis:30%

item 2에 flex-basis:10%

item3에 flex-basis:60%만큼 주었다.

페이지의 weight에 따라 화면에 배치된 item의 %에 따라 사이즈가 달라진다.

align-self item별로 item들을 정렬할 수 있다.

item 하나만 특별하게 배치하고 싶을 때 align-self: center을 이용한다.

order / 아이템의 위치를 조정하는 데 사용되고 기본 값은 0으로 되어 있다.

order의 순서에 따라 배치된 모습, 만약 order의 순서가 겹친다면 위에서 아래 순서로 적용이 된다.