flex-basis auto, 0 차이

Question

flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다. 따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.

블루윤 · Answer

https://codepen.io/piarey/pen/eYodpKK ㄴ 요거 보시면 이해 되실거라 봅니다. 요약하면.... flex-basis: auto; ===>>> 아이템 너비를 콘텐츠에 따르겠다. === 균등하지가 않겠죠? flex-basis: 0; ===>>> 아이템 너비를 0 으로 하겠다. === flex-grow: 1; 시 균등하겠죠? But 아이템들이 비어 있으면 flex-grow: 1; 에 의해 auto 를 쓰던 0 을 쓰던 동일한 결과를 얻게 됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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 관련 속성들이 어떻게 상호작용하는지 관찰해보시는 것이 좋습니다.