[html] 플렉스 아이템이 컨텐츠 크기를 넘어 축소되지 않는 이유는 무엇입니까?
4 개의 flexbox 열이 있고 모든 것이 잘 작동하지만 텍스트를 열에 추가하고 큰 글꼴 크기로 설정하면 flex 속성으로 인해 열이 더 넓어집니다.
사용하려고 시도했지만 word-break: break-word
도움이되었지만 열의 크기를 매우 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 나뉘어 있지만 (한 줄에 하나의 문자) 열이 한 글자 크기보다 작지 않습니다. .
이 비디오를보십시오
(처음에는 첫 번째 열이 가장 작지만 창 크기를 조정할 때 가장 큰 열입니다. 나는 항상 플렉스 설정을 존중하고 싶습니다. 플렉스 크기 1 : 3 : 4 : 4)
글꼴 크기와 열 패딩을 더 작게 설정하면 도움이되지만 다른 해결책이 있습니까?
사용할 수 없습니다 overflow-x: hidden
.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
답변
플렉스 아이템의 자동 최소 크기
flexbox 기본 설정이 발생했습니다.
플렉스 항목은 기본 축을 따라 내용의 크기보다 작을 수 없습니다.
기본값은 …
min-width: auto
min-height: auto
… 행 방향 및 열 방향의 플렉스 항목에 각각 적용됩니다.
flex 항목을 다음과 같이 설정하여 이러한 기본값을 무시할 수 있습니다.
min-width: 0
min-height: 0
overflow: hidden
(또는를 제외한 다른 값visible
)
Flexbox 사양
플렉스 항목에보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 CSS 2.1에 정의 된 및 속성
auto
의 초기 값으로 새로운 값을 소개합니다 .min-width
min-height
auto
가치 와 관련하여 …
그가요 항목
overflow
이다visible
플렉스 항목의 메인 축 최소 크기 속성에 지정된 경우 주축에, 지정 자동 최소 크기 . 그렇지 않으면로 계산합니다0
.
다시 말해:
min-width: auto
및min-height: auto
시 기본값에만 적용overflow
입니다visible
.overflow
값이 아닌 경우visible
min-size 속성의 값은입니다0
.- 따라서
overflow: hidden
를 대체 할 수있다min-width: 0
및min-height: 0
.
과…
- 최소 크기 알고리즘은 기본 축에만 적용됩니다.
- 예를 들어, 행 방향 컨테이너의 플렉스 항목은
min-height: auto
기본적으로 제공 되지 않습니다 . - 자세한 설명은이 게시물을 참조하십시오.
최소 너비 : 0을 적용 했는데도 항목이 축소되지 않습니까?
중첩 된 플렉스 컨테이너
당신이 HTML 구조의 여러 수준에 플렉스 항목을 처리하는 경우, 기본값을 대체 할 필요가있다 min-width: auto
/ min-height: auto
높은 수준에서 항목을.
기본적으로 더 높은 수준의 플렉스 항목은으로 min-width: auto
아래에 중첩 된 항목의 축소를 방지 할 수 있습니다 min-width: 0
.
예 :
브라우저 렌더링 노트
-
Chrome과 Firefox / Edge
2017 년부터 Chrome은 (1)
min-width: 0
/min-height: 0
기본값으로 되돌 리거나 (2)0
미스터리 알고리즘을 기반으로 특정 상황 에서 기본값을 자동으로 적용하는 것으로 보입니다 . (이것은 그들이 개입 이라고 부를 수 있습니다 .) 그 결과 많은 사람들이 레이아웃 (특히 원하는 스크롤바)이 Chrome에서 예상대로 작동하지만 Firefox / Edge에서는 작동하지 않는 것을보고 있습니다. 이 문제는 Firefox와 Chrome의 flex-shrink 불일치에 대해 자세히 설명합니다. -
IE11
사양에 명시된 바와 같이 and 속성 의
auto
값 은 “new”입니다. 일부 브라우저는 여전히 렌더링 수 있음이 수단 값이 업데이트되기 전에 그들이 플렉스 레이아웃을 구현하기 때문에 때문에, 기본적으로 값을 초기 값 과 의 CSS 2.1 . 그러한 브라우저 중 하나는 IE11입니다. 다른 브라우저는 flexbox spec에 정의 된 새로운 값으로 업데이트되었습니다 .min-width
min-height
0
0
min-width
min-height
auto