[CSS] flex-item 특성 / flex-grow, flex-shrink, flex-basis

order : flex-item에 적용되는 특성으로 아이템 배치 순서 설정

 

order 값을 적용한 item은 적용시킨 순서대로 정렬되지만 order값이 없는 item보다 뒤에서부터 정렬된다.

 

---

flex-grow : flex-item에 적용되는 특성으로 증가 비율 조정

flex-grow:0; 기본값. 강제로 컨테이너를 채우지 않음.

플렉스 아이템이 가지고 있는 기본 가로값 그대로 유지

flex-grow:1; 1:1:1:1 비율로 동일하게 컨테이너를 채움

flex-grow:1 / flex-grow:2;  1:1:1:2

flex-grow:1 / flex-grow:2 / flex-grow:2 / flex-grow:3;

width:300px / flex-grow:1 / flex-grow:2 / flex-grow:1;

고정된 width 값을 제외하고 나머지 width 값에서 1:2:1 비율로 컨테이너를 채움.

---

flex-shrink 감소 비율

숫자가 클수록 감소 값이 커지기 때문에 아이템의 크기는 작아진다.

 

flex-shrink: 1; 기본값. 아이템이 컨테이너를 넘지 않음

flex-shrink: 0;  주어진 width값을 그대로 가져가기 때문에 컨테이너를 넘길 수 있음.

flex-shrink: 1 / flex-shrink: 2 / flex-shrink: 2;

flex-shrink: 2 / flex-shrink: 2 / flex-shrink: 1;

---

flex-basis : 기준 비율

(컨테이너 width: 600px, 아이템의 width: 300px)

flex-basis: auto; 기본값.  아이템 크기에 맞춰 grow 비율 설정

flex-basis: 0;

flex-basis: 150px;

flex-basis: 300px;

flex-shrink: 1; 이 기본값으로 적용되어 있기 때문에 컨테이너를 넘지 못함.

---

flex: flex-grow flex-shrink flex-basis

 

flex: flex-grow:0 flex-shrink: 1 flex-basis: auto;

flex: flex-grow: 1;1;2; flex-basis: auto;

 

flex: flex-grow: 1;1;2; flex-basis: 0;

 

flex: flex-grow: 1;1;2; flex-basis: 100px;