https://makandracards.com/makandra/66994-css-flex-and-min-width
CSS: Flex and "min-width"
min-width is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that feels like max-width. min-width in a flex context While the default min-width value is 0 (zero), for flex i
makandracards.com
min-width in a flex context
디폴트 min-width 값은 0(영)이지만 플렉스 항목의 경우 auto(for flex items it is auto) 입니다.
이것은 블록 요소가 원하는 것보다 훨씬 더 많은 공간을 차지하도록 만들 수 있으며,
심지어 작은 화면의 화면 가장자리 너머로 컨테이너를 확장할 수도 있습니다.
min-width는 width와 max-width보다 우선합니다.((min-width is defined to win against competing width and max-width))
즉, 요소의 너비가 암시적인 auto width 아래로 축소되는 즉시 min-width:auto가 시작되어 요소가 축소되는 것을 방지합니다.
min-width: 0브라우저에 이 요소가 최소 너비를 차지할 권한이 없음을 알려줍니다. (원래 auto > 0)
이제 제대로 사용 가능한 너비만큼만 차지합니다.
참고
what-are-the-differences-between-flex-basis-and-width
What are the differences between flex-basis and width?
There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is flex-basis allows you to specify the initial/starting size of the
stackoverflow.com
The difference between width and flex-basis in Flexbox
The difference between width and flex-basis in Flexbox
by Kyle Gallagher The difference between width and flex-basis in Flexbox Understanding the weird parts When I first started learning Flexbox, the thing that struck me curious the most was “Why did they add this flex-basis in?” I mean, I have width…Wh
www.freecodecamp.org
'FrontEnd' 카테고리의 다른 글
| 웹 애플리케이션을 구성하는 요소들 (0) | 2022.07.01 |
|---|---|
| React DnD 튜토리얼 (0) | 2022.06.30 |
| zustand와 타입스크립트 [공식문서번역] (0) | 2022.06.29 |
| React-Hook-Forms로 재사용 가능한 폼 만들기 (0) | 2022.06.28 |
| 리액트 라우터 v6를 이용해 쉽게 모달 만들기 (0) | 2022.06.27 |
