Flex 항목이 콘텐츠 크기 이상으로 줄어들지 않는 이유는 무엇입니까?
P粉242126786
2023-08-27 16:35:08
<p>4개의 Flexbox 열이 있고 모든 것이 잘 작동하지만 열에 일부 텍스트를 추가하고 큰 글꼴 크기로 설정하면 Flex 속성으로 인해 열이 원래보다 넓어집니다. </p>
<p><code>word-break:break-word</code>를 사용해 보았더니 도움이 되었지만 열의 크기를 매우 작은 너비로 조정하면 텍스트의 문자가 여러 행으로 나누어졌습니다(1개). 행당 문자), 단, 열 너비는 문자 크기보다 작지 않습니다. </p>
<p>동영상 보기
(처음에는 첫 번째 열이 가장 작지만 창 크기를 조정하면 가장 넓은 열이 됩니다. 항상 Flex 설정을 존중하고 싶습니다. Flex 크기는 1:3:4:4) </p>
<p>글꼴 크기와 열 패딩을 더 작게 설정하면 도움이 될 것 같지만... 다른 해결 방법이 없을까요? </p>
<p><code>overflow-x:hidden</code>을 사용할 수 없습니다. </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
디스플레이: 플렉스;
너비: 100%
}
.col {
최소 높이: 200px;
패딩: 30px;
word-break: 단어를 깨다
}
.col1 {
플렉스: 1;
배경: 주황색;
글꼴 크기: 80px
}
.col2 {
플렉스: 3;
배경: 노란색
}
.col3 {
플렉스: 4;
배경 : 하늘색
}
.col4 {
플렉스: 4;
배경: 빨간색
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="col col1">로렘 입숨 돌러</div>
<div class="col col2">로렘 입숨 돌러</div>
<div class="col col3">로렘 입숨 돌러</div>
<div class="col col4">로렘 입숨 돌러</div>
<p><br /></p>
![[웹 프런트엔드] 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 사양.
수정된 데모