[CSS] Flexbox : Items 속성

 

① order

item 순서 우선순위 설정함. 속성 값의 숫자 작을수록 우선순위 높음. 음수 허용.

 

② flex-grow

아이템의 너비를 컨테이너 너비에 맞게 자동으로 늘림.

속성 값에 비례하게 너비 조정됨.

③ flex-shrink

아이템의 너비를 컨테이너 너비에 맞게 자동으로 줄임.

속성값 1(default): 적용 / 0: 해제 / 속성 값에 비례하게 너비 조정됨.

아이템 전체에 설정할 수도, 개별로 설정할 수도 있음.

 

④ flex-basis

아이템의 기본 사이즈 지정

 

⑤ flex

[flex-grow, flex-shrink, flex-basis] 결합. default: [0 1 auto]

두번째, 세번째 인자 생략 가능 (flex: 5; => shrink=1 basis 0%)

(1) 값 한 개일 때

- 단위 없으면 grow 값

- 단위 있으면 basis 값

(2) 값 두 개일 때

- 첫 번째 값: grow. 단위 없어야 함

- 두 번째 값: 단위 없으면 shrink, 단위 있거나 auto면 basis.

(3) 값 세 개일 때

- 첫 번째 값: grow. 단위 없어야 함

- 두 번째 값: shrink. 단위 없어야 함

- 세 번째 값: basis. 단위 있거나 auto

 

 

---

 

 

[CSS] Flexbox

 

 

[CSS] Flexbox : Container 속성