Flex Items 속성 - flex-basis

Item의 (공간 배분 전) 기본 너비를 설정한다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다.
하지만 단위 값이 주어질 경우 설정할 수 없다.

값	의미	기본값
auto	가변 item과 같은 너비	auto
단위	px, em, cm등 단위로 지정

flex-basis: 기본너비;

flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의하자.

 

.container{
  border: 4px solid;
  display: flex;
}

.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  flex-grow: 1;
  flex-basis: 100px;
}

.container .item3{
  flex-grow: 2;
}

사용방식은 다음과 같고 flex-basis는 flex-grow의 너비 비율에 상관없이 요소가 가지고 있을 기본너비를 설정해주는 속성이다.