궁금1. - flex 안줄어들게 하고싶을땐?

//

여기에는 site 만들면서 궁금한것들을 적을 생각이다.

노션을 배울까도 했지만 시간이 없어서...

궁금1. 화면을 줄였을떄 저기 표시된 부분이 안줄었으면 하려면??

 

flex: 0 0 60%

flex-shrink를 0으로 했는데도 화면의 크기를 줄어드니 줄어든다;;;;나는 분명 flex-shrink를 0으로 했는데..

왜 줄어들지?...

 

-->

flex-shrink 속성이 0으로 설정되어 있음에도 불구하고, 아이템이 줄어드는 현상이 발생하는 이유는

 flex-basis 속성 때문일 수 있습니다. flex-basis: 60%는 아이템의 기본 크기가 컨테이너의 전체 크기의 60%를 차지하도록 설정합니다. 이 경우, 화면 크기가 줄어들면 컨테이너의 크기도 함께 줄어들게 되고, 그에 따라 아이템의 절대적 크기도 줄어들게 됩니다.

화면이 줄어들 때 아이템이 줄어드는 것은 flex-shrink 속성 때문이 아니라, 컨테이너의 크기가 줄어들면서 flex-basis에 의해 설정된 비율에 따라 아이템의 크기도 줄어드는 것입니다. flex-shrink 속성은 주로 여러 아이템들이 한 컨테이너 내에 있을 때, 그 컨테이너의 크기가 아이템들의 총 크기보다 작아졌을 때 아이템들이 얼마나 축소될지를 결정합니다.

 

그럼, 안줄어들게 하고싶으면??

 

.flex-item {
  flex: 0 0 60%;
}

@media (max-width: 600px) {
  .flex-item {
    flex-basis: 300px; /* 화면이 600px 이하일 때 아이템의 크기를 300px로 고정 */
  }
}

 

 

아하!!