Flex 항목을 콘텐츠 크기보다 작게 줄일 수 없는 이유는 무엇입니까?
P粉432906880
2023-08-21 22:36:03
<p>Flexbox 열이 4개 있고 모든 것이 잘 작동하지만 한 열에 일부 텍스트를 추가하고 큰 글꼴 크기로 설정하면 flex 속성으로 인해 열이 원래보다 넓어집니다. </p>
<p><code>word-break: break-word</code>를 사용해 보았더니 도움이 되었지만 열의 크기를 아주 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 나누어졌습니다(한 줄). 행당 문자), 단, 열 너비는 문자 크기보다 작지 않습니다. </p>
<p>이 동영상 보기(처음에는 첫 번째 열이 가장 작지만 창 크기를 조정하면 가장 넓은 열이 됩니다. 항상 플렉스 설정을 존중하고 싶습니다. 플렉스 크기는 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)
이로 인해 지난 몇 년 동안 플렉스와 그리드 모두에 여러 번 문제가 발생했다는 것을 알았으므로 다음을 제안합니다.
으아아아이 동작이 필요한 경우
min-width: auto或min-height: auto를 사용하세요.실제로 상자 크기를 추가하여 모든 레이아웃을 더욱 합리적으로 만들 수도 있습니다.
으아아아이상한 결과가 나타나는지 아는 사람 있나요? 위의 방법을 몇년 동안 사용해 왔는데 아무런 문제가 없었습니다. 사실, flex/grid에서 안쪽으로 콘텐츠를 배치하는 것이 아니라 콘텐츠에서 바깥쪽으로 flex/grid로 레이아웃하려는 상황은 전혀 생각할 수 없습니다. 그리고 그러한 상황이 존재하는 경우는 확실히 드뭅니다. 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 제가 뭔가를 놓치고 있는 게 아닐까요?
Flex 프로젝트의 자동 최소 크기
Flexbox의 기본 설정이 나타납니다.
Flex 항목은 주축의 콘텐츠 크기보다 작을 수 없습니다.
기본 설정은...
min-width: automin-height: auto...행 및 열 방향으로 각각 플렉스 항목에 적용 가능합니다.
플렉스 항목을 다음과 같이 설정할 수 있습니다.
min-width: 0min-height: 0overflow: hidden（或任何其他值，除了visible)Flexbox 사양
auto값 정보...즉,
-
는 -
. -
및
을 대체할 수 있습니다.min-width: auto和min-height: auto默认仅在overflow为visible및overflow가visible인 경우에만 기본적으로 적용 가능합니다.overflow的值不是visible，则min-size属性的值为0만약overflow: hidden可以替代min-width: 0和min-height: 0따라서overflow:hidden은그리고...-
- 최소 크기 알고리즘은 스핀들에서만 작동합니다.
예를 들어 행 기반 컨테이너의 플렉스 항목은 기본적으로 - 를 얻지 못합니다.
- 자세한 설명은 다음 게시물을 참조하세요.
최소 너비는 플렉스 방향: 행과 플렉스 방향: 열에서 다르게 렌더링됩니다
min-height: automin-width: 0을 적용했지만 프로젝트가 여전히 축소되지 않나요?
중첩된 Flex 컨테이너
HTML 구조의 여러 수준에서 가변 항목을 사용하여 작업하는 경우 상위 수준 항목의 기본값min-width: auto/min-height: auto/
min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0을 재정의할 수 있습니다.기본적으로
가 포함된 상위 레벨 플렉스 항목은가 포함된 아래 중첩 항목이 축소되는 것을 방지합니다.-
예:
- Flex 항목은 내용보다 작게 축소될 수 없습니다
- 하위 요소를 상위 요소에 적용
white-space CSS 속성이 플렉스 레이아웃과 충돌합니다
브라우저 렌더링 고려 사항
intervention🎜🎜이라고 불리는 것일 것입니다.) 결과적으로 많은 사람들이 레이아웃(특히 원하는 스크롤 막대)이 Chrome에서는 예상대로 작동하지만 Firefox/Edge에서는 작동하지 않는 것을 봅니다. 자세한 내용은 여기를 참조하세요: 🎜Firefox와 Chrome의 flex-shrink 차이점🎜🎜min-width: 0/min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0Chrome과 Firefox/Edge 2017년부터 Chrome은 (1) 기본값인 /로 되돌리거나 (2) 신비한 알고리즘을 기반으로 특정 상황에서 기본값0을 자동으로 적용하는 것으로 보입니다. (이것이 아마도IE11
사양에 명시된 대로
min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto값입니다.수정된 데모