-
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
flex-basis auto, 0 차이
23.12.11 20:07 작성 조회수 218
0
flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다.
따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.
답변을 작성해보세요.
0
블루윤
2024.03.14
https://codepen.io/piarey/pen/eYodpKK
ㄴ 요거 보시면 이해 되실거라 봅니다.
요약하면....
flex-basis: auto; ===>>> 아이템 너비를 콘텐츠에 따르겠다. === 균등하지가 않겠죠?
flex-basis: 0; ===>>> 아이템 너비를 0 으로 하겠다. === flex-grow: 1; 시 균등하겠죠?
But
아이템들이 비어 있으면 flex-grow: 1; 에 의해 auto 를 쓰던 0 을 쓰던 동일한 결과를 얻게 됩니다.
0
인프런 AI 인턴
2023.12.13
안녕하세요, 인프런 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 관련 속성들이 어떻게 상호작용하는지 관찰해보시는 것이 좋습니다.
답변 2