4개의 Flexbox 열이 있고 모든 것이 잘 작동하지만 열에 일부 텍스트를 추가하고 큰 글꼴 크기로 설정하면 Flex 속성으로 인해 열이 원래보다 넓어집니다.
word-break:break-word을 사용해 보았는데 도움이 되었지만 열 크기를 매우 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 분할되고(한 줄에 한 글자) 열 너비가 결코 1보다 작아지지 않습니다. 글자의 크기.
이 동영상 보기 (처음에는 첫 번째 열이 가장 작지만 창 크기를 조정하면 가장 넓은 열이 됩니다. 항상 Flex 설정을 존중하고 싶습니다. Flex 크기는 1:3:4:4)
알고 있습니다. 글꼴 크기와 열 패딩을 더 작게 설정하면 도움이 될 것입니다...그런데 다른 해결 방법이 있나요?
사용할 수 없습니다 overflow-x:hidden.
JSFiddle
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Flex와 그리드가 수년 동안 저를 괴롭혀 왔다는 것을 알고 다음을 제안합니다.
으아아아그런 다음 이 동작이 필요하면
min-width: auto或min-height: auto를 사용하세요.실제로 상자 크기를 추가하여 모든 레이아웃을 더욱 논리적으로 만들 수도 있습니다.
으아아아이상한 결과가 나타나는지 아는 사람 있나요? 위의 방법을 혼합해서 사용해도 몇 년 동안 아무런 문제가 없었습니다. 사실 Flex/Grid에서 콘텐츠 안쪽으로 레이아웃하는 대신 콘텐츠에서 바깥쪽으로 Flex/Grid로 레이아웃하려는 경우는 전혀 생각할 수 없습니다. 물론 존재한다면 그런 경우는 드뭅니다. . 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 제가 뭔가를 놓치고 있는 게 아닐까요?
Flex 프로젝트의 자동 최소 크기
Flexbox 기본 설정이 나타납니다.
Flex 항목은 주축을 따른 콘텐츠 크기보다 작을 수 없습니다.
기본값은...
最小宽度：自动最小高度：自动...행 및 열 방향 각각에 대한 유연한 항목입니다.
Flex 항목을 다음으로 설정하여 이러한 기본값을 무시할 수 있습니다.
最小宽度：0最小高度：0溢出：隐藏（或任何其他值，可见제외)Flexbox 사양
auto값 정보...즉,
min-width: auto和min-height: auto默认值仅在overflow可见.overflow值不可见，则min-size属性的值为0.overflow: hide可以替代min-width: 0和min-height: 0.역시...
min-height: auto를 얻지 못합니다.min-width: 0을 적용했지만 프로젝트가 여전히 줄어들지 않습니까?
중첩된 Flex 컨테이너
HTML 구조의 여러 수준에서 Flex 프로젝트로 작업하는 경우 상위 수준 프로젝트에서 기본값
min-width: auto/min-height: auto code>를 재정의할 수 있습니다.기본적으로
min-width: 0을 사용하여 아래에 중첩된 프로젝트가 축소되는 것을 방지합니다.min-width: auto的更高级别的 Flex 项目可以防止使用min-width: 0를 사용하는 더 높은 수준의 Flex 프로젝트는
예:-
Flex 항목은 내용물보다 작게 줄어들지 않습니다
-
아이를 부모에게 맞추세요
-
빈 CSS 속성은 Flex
에 문제를 일으킬 수 있습니다.
브라우저 렌더링 지침-
-
에 정의된 값Chrome과 Firefox/Edge
🎜적어도 2017년부터 Chrome은 (1)
min-width: 0/min-height: 0默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用0기본값으로 되돌아가는 것 같습니다. (이것이 아마도 intervention이라고 불리는 것일 것입니다.) 결과적으로 많은 사람들이 레이아웃(특히 필수 스크롤 막대)이 Chrome에서는 예상대로 작동하지만 Firefox/Edge에서는 작동하지 않는 것을 보고 있습니다. 이 문제는 여기에서 더 자세히 다룹니다. Firefox와 Chrome의 flex-shrink 차이점IE11
사양에 명시된 대로
다른 브라우저는 최신min-width및min-height속성의auto값은 "new"입니다. 이는 일부 브라우저가 값을 업데이트하기 전에 Flex 레이아웃을 구현하고0이최소 초기 값 0값을 계속 렌더링할 수 있음을 의미합니다. href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths" rel=" -width 및min-heightnoreferrer"> CSS 2.1min-width和min-height属性的auto值为“新”。这意味着某些浏览器默认情况下仍可能呈现0值，因为它们在更新该值之前实现了 Flex 布局，并且0是min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的flexbox 规范中定义的 auto. IE11이 바로 그런 브라우저입니다.flexbox auto 사양.
수정된 데모