[CSS] Flexbox(2) - Item속성

안녕하세요? 아이템 속성들입니다.

딱히 어려운건 없었어요.

---

✨Flex 아이템 속성들 자세히 알아보기

✔️order

: flex 컨테이너에 나타나는 순서를 제어함

order2 가 order 1보다 크므로 뒤로감,

order-1이 0보다 크므로 뒤로 감

 

✔️flex-grow

: 너비를 자동으로 늘어나도록 함.

=> 180 픽셀을 나눠가짐.

 

✔️flex-shrink

: 너비를 자동으로 줄어들도록 함.

• 주로 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는데 사용함.
• flex-wrap: wrap; 속성이 부여된 경우 적용되지 않음 (당연함. 아래로 내려버리기 때문에.)
  • flex-wrap 속성을 적용하지 않거나 nowrap으로 해야함.

✔️flex-basis

: flex 아이템의 기본 사이즈를 지정하는 속성

• 한꺼번에 또는 하나씩 정의 가능

 

✔️flex

: flex-grow, flex-shrink, flex-basis 가 모두 결합된 약어

두번째, 세번째 매개변수(flex-shrink, flex-basis)는 선택사항임.

flex: 2;
/* 값이 1개일때 단위가 없으면 grow */
flex: 10em;
/* 값이 1개일때 단위가 있으면 basis */

/* 값이 두개면 첫 번째 값은 단위가 없어야함!! */
flex: 2 30px;
/* 두번째 값이 단위가 있거나 auto면 basis */
flex: 2 2;
/* 두번째 값이 단위가 없으면 shrink */