flex-basis

flex-basis.

정의

MDN에서 flex-basis를 다음과 같이 정의하고 있다.

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다.

display: flex 특성 상, content의 width가 viewport 보다 크면 width를 따르지 않고 뭉게버린다.

flex-basis 역시 초기 크기로서 그 값이 유효하지, 변형될 상황인 경우 width와 크게 다르지 않다.

width 와 차이점

어떤 차이점이 있는 건가?

width는 수평으로서의 길이에 한정되어 있는 반면, flex-basis는 flex-direction에 따라 height와 그 의미를 같이 할 수 있다는 점이다.

.parent {
  display: flex;
  flex-direction: column;  
}

.child {
  flex-basis: 100px;
}

위의 경우, flex-basis: 100px은 height: 100px; 과 같다고 볼 수 있다.

etc

• flex-basis의 값이 auto가 아닌 경우, width값과 동시에 적용했을 때 flex-basis가 우선적으로 적용된다.