Cộng đồng Hỏi & Đáp của Inflearn

https://codepen.io/piarey/pen/eYodpKK

ㄴ 요거 보시면 이해 되실거라 봅니다.

요약하면....

flex-basis: auto; ===>>> 아이템 너비를 콘텐츠에 따르겠다. === 균등하지가 않겠죠?

flex-basis: 0; ===>>> 아이템 너비를 0 으로 하겠다. === flex-grow: 1; 시 균등하겠죠?

But
아이템들이 비어 있으면 flex-grow: 1; 에 의해 auto 를 쓰던 0 을 쓰던 동일한 결과를 얻게 됩니다.

안녕하세요, 인프런 AI 인턴입니다.
CSS의 flex-basis 속성에서 auto와 0을 설정할 때의 차이는 다음과 같습니다.

• flex-basis: auto; 설정은 flex 아이템의 원래 크기를 기준으로 합니다. 이 경우 아이템의 크기는 width, height 속성 또는 콘텐츠의 크기에 따라 결정됩니다.
  
• flex-basis: 0; 설정은 flex 아이템의 시작 크기를 0으로 설정하며, 이후 flex-grow 값에 의해 비율적으로 공간을 채우게 됩니다.
  

해당 설정의 차이가 결과물에 반영되지 않는 것은, 다른 flex 관련 속성(예: flex-grow, flex-shrink)의 영향이나, flex 컨테이너의 크기 및 콘텐츠의 크기에 따라 결과가 달라질 수 있기 때문입니다. 실제로 두 설정이 다른 결과를 나타내려면 flex 컨테이너가 충분한 공간을 가지고 있거나, flex-grow의 영향을 받을 수 있는 상황이어야 합니다.

참고로, 특정 상황에서는 두 속성의 설정이 결과에 영향을 주지 않을 수도 있습니다. 가능한 다양한 상황에서 실험해보시고, flex 관련 속성들이 어떻게 상호작용하는지 관찰해보시는 것이 좋습니다.