Flexbox .6 flex-basis

이번엔 flex-basis에 대해서 알아보자.

이 속성도 자식요소에 적용시키는 속성이다.

 

flex-basis

flexbox의 initial size를 지정해준다.  얼핏 보면 width값을 지정하는 것과 비슷하다.

예를 들어 보자.

width: 300px;을 지정한것과   flex-basis:300을 지정한 박스는 보기와 같이 같다.

자 여기서 기준은 flex-direction이 row일때를 기준인 것이다

다시말해 main-axis상에서 flex-basis가 300px이다.

만약 축을 뒤집는 flex-direction: column이 된다면?

바뀌었다. 바로 main-axis를 따라 basis값으로 height가 300px이 되었다.

이것이 그저 width로 설정한 것과 다른 점이다.