TIL -Flex item 속성값

📌 flex-basis

• flex item 들의 기본 크기를 지정 (width처럼 강제성 없음)
• flex-direction이 row일땐 너비, column일땐 높이 지정
• flex-basis:auto; 기본값으로 width, height 값 사용
• flex-basis : 0 기본 넓이 없다는 것, 원래 내가 가진 크기 초기화
• 만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시됨.

💡 0 외에 다른 상수값을 사용할 수 없음.

📌 flex-grow

• flex-basis의 값보다 더 늘어나도 되는지 지정하는 값으로,
  할당된 값에 따라 자신을 감싸는 컨테이너의 공간(여백)을 할당.

  • flex-grow  : 1 —> 자식 요소들이 모두 동일한 크기의 공간을 할당받음.

  • flex-grow  : 2 —> 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간을 할당받음. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라짐.

• 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈공간을 메우게 됨. 기본값이 0이기 때문에 따로 적용하기 전까지는 아이템이 늘어나지 않음.

💡 flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할합니다.

📌 flex-shrink

• flex-grow와 반대되는 개념으로
  아이템이 flex-basis의 값보다 작아질 수 있는지 결정

• 크기를 고정하거나 줄이는 역할

• 마이너스 숫자는 받아들이지 않음.

  • flex-shrink:0; 줄어들지 않음. (컨테이너의 크기가 줄어도 값은 고정)
  • flex-shrink:1; 줄어듦. (기본값)
    따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있음

💡 부모에 flex-wrap: wrap; 속성이 있는 경우 적용되지 않습니다.

flex 속성

/* flex: flex-grow, flex-shrink, flex-basis */
flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */