flex item 속성

flex-basis

flex-item 의 기본 크기를 설정한다. (부모의 flex-direction이 row일 때는 너비, column일 때는 높이)  메인 축 기준★

default 는 auto 이다 -->기존 자기 자신의 width or height 를 base로 가질래 !! 하는 것이 => auto

width: 200px 일 경우 default : auto 라면 base 는 200px.

 

그렇다면 flex-basis : 0 일경우? 자기 자신의 content 크기 만큼 가진다.

 

 

flex-direction이 row 라고 가정해보자.

 

각 flex items 들에게 flex-basis width 값을 주었을 경우 (좀 더 유연하다)

flex-basis : 100px; (아이템이 점유하는 크기)

아이템 원래 요소의 값이 100px 넘는다면  width 값이 100px 초과하는 width 를 사용 하게 된다.
(원래 자기 자신의 width 사용)

반대로 아이템 원래 요소의 값이 100px 넘지 않는다면 width 값은 100px 이 된다.

 

반대로 flex items 들에게 그냥 width 100 값을 주었을 경우

아이템들 모두 width 100이 된다.

 

flex : 1 은 아래와 같다 
flex-grow : 1;
flex-shrink : 1;

flex-basis : 0;

 

---