html 이미지 - 왜곡 된 항목이 과거의 콘텐츠 크기를 줄이지 않는 이유는 무엇입니까?




설명 태그 (2)

Flex 아이템의 자동 최소 사이즈

플렉스 박스 기본 설정이 있습니다.

플렉스 항목은 주축을 따라 내용의 크기보다 작을 수 없습니다.

기본값은 ...

  • min-width: auto
  • min-height: auto

... 행 방향 및 열 방향의 플렉스 항목 각각에 사용됩니다.

플렉스 항목을 다음과 같이 설정하여이 기본값을 무시할 수 있습니다.

  • min-width: 0
  • min-height: 0
  • overflow: hidden (또는 visible 제외한 다른 값)

Flexbox 사양

4.5. 플렉스 아이템의 자동 최소 크기

플렉스 아이템에보다 합리적인 디폴트 최소 사이즈를 제공하기 위해,이 스펙은 CSS 2.1에 정의 된 min-widthmin-height 속성의 초기 값으로 새로운 auto 값을 도입합니다.

auto 가치와 관련해서 ...

flex 아이템의 주축에서 visible 있는 flex 아이템에서, flex 아이템의 main-axis min-size 속성에 지정된 경우 자동 최소 사이즈를 지정합니다. 그렇지 않으면 0 계산됩니다.

다른 말로:

  • min-width: automin-height: auto 기본값은 overflowvisible 경우에만 적용됩니다.
  • overflow 값이 visible 되지 않으면 min-size 속성 값은 0 입니다.
  • 따라서 overflow: hiddenmin-width: 0min-height: 0 대체 할 수 있습니다.

과...

  • 최소 크기 조정 알고리즘은 기본 축에만 적용됩니다.
  • 예를 들어, 행 방향 컨테이너의 flex 항목은 기본적으로 min-height: auto 를 얻지 못합니다.
  • 자세한 내용은이 게시물을 참조하십시오.
    • flex-direction에서의 최소 너비 렌더링 : 행 및 플렉스 방향 : 열

최소 너비 : 0을 적용했으며 항목이 여전히 축소되지 않습니까?

중첩 된 플렉스 컨테이너

HTML 구조의 여러 수준에서 플렉스 항목을 다루는 경우, 기본 min-width: auto / min-height: auto 상위 항목의 min-height: auto 항목을 재정의해야 할 수도 있습니다.

기본적으로 min-width: auto 사용하는 높은 수준의 flex 항목은 min-width: 0 아래에 중첩 된 항목의 축소를 방지 할 수 있습니다.

예 :

  • 플렉스 항목이 내용보다 작게 축소되지 않음
  • 아이를 부모에게 맞추기
  • 공백 CSS 속성이 flex를 사용하여 문제를 생성하고 있습니다.

브라우저 렌더링 노트

  • Chrome과 Firefox / Edge

    최소 2017 년 이후로 Chrome은 (1) min-width: 0 / min-height: 0 기본값으로 되돌 리거나 (2) 미스테리 알고리즘에 따라 특정 상황에서 0 기본값을 자동으로 적용하는 것으로 나타났습니다. 결과적으로 많은 사람들이 자신의 레이아웃 (특히 원하는 스크롤바)이 Chrome에서는 예상대로 작동하지만 Firefox / Edge에서는 제대로 작동하지 않는 것으로 나타났습니다. 이 문제는 여기에서 더 자세히 다루어집니다 : Firefox와 Chrome 사이의 flex-shrink 불일치

  • IE11

    스펙에서 언급했듯이 min-widthmin-height 속성의 auto 값은 "new"입니다. 즉, 일부 브라우저는 값이 업데이트되기 전에 플렉스 레이아웃을 구현했고 CSS 2.1의 min-height min-widthmin-height0 값이기 때문에 기본적으로 0 값을 렌더링 할 수 있습니다. 그러한 브라우저 중 하나가 IE11입니다. 다른 브라우저는 flexbox 사양에 정의 된대로 최신 auto 값으로 업데이트되었습니다.

수정 된 데모

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.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>

jsFiddle

4 flexbox 열 및 모든 작동합니다,하지만 열에 일부 텍스트를 추가하고 큰 글꼴 크기를 설정할 때 그것은 플렉스 속성으로 인해보다 넓은 열을 만들고 있습니다.

word-break: break-word 를 사용하려고 시도했지만 도움이되었습니다. 그러나 여전히 아주 작은 너비로 열의 크기를 조정하면 텍스트의 글자가 여러 줄 (한 줄에 한 글자)으로 나뉘지만 열은 한 글자 크기보다 작은 너비를 얻으십시오.

이 비디오를 시청하십시오 : http://screencast-o-matic.com/watch/cDetln1tyT (처음에는 첫 번째 열이 가장 작습니다. 그러나 창 크기를 조정할 때 가장 넓은 열입니다. 단지 flex를 존중하고 싶습니다. 설정은 항상, 플렉스 크기 1 : 3 : 4 : 4)

글꼴 크기와 열 패딩을 작게 설정하면 도움이 될 것입니다. 그러나 다른 해결책이 있습니까?

overflow-x: hidden 사용할 수 없습니다 overflow-x: hidden

JSFiddle : https://jsfiddle.net/78h8wv4o/3/

.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>


그렇다면 HTML 파서는 어떻게 작동합니까? 구문 분석을 위해 정규식을 사용하지 않습니까?

음 ... 아니.

만약 당신이 두뇌에서 계산 과정의 이론으로 돌아 가면, 하나를 택했거나 컴파일러 과정이나 비슷한 것을 택했다면 다른 종류의 언어와 계산 모델이 있다는 것을 상기 할 수 있습니다. 나는 모든 세부 사항에 들어갈 자격이 없지만 당신과 함께 주요 요점들 중 몇 가지를 검토 할 수 있습니다.

가장 간단한 언어 및 계산 유형은 정규 언어입니다. 이것들은 정규 표현식으로 생성 될 수 있으며, 유한 오토마타로 인식 될 수 있습니다. 기본적으로 이러한 언어의 "구문 분석"문자열은 상태를 사용하지만 보조 메모리는 사용하지 않습니다. HTML은 확실히 정규 언어가 아닙니다. 생각해 보면, 태그 목록은 임의로 깊이 중첩 될 수 있습니다. 예를 들어 표에는 표가 포함될 수 있으며 각 표에는 많은 중첩 된 표가 포함될 수 있습니다. 정규식을 사용하면 한 쌍의 태그를 선택할 수는 있지만 임의적으로 중첩되지는 않습니다.

정규가 아닌 고전적인 간단한 언어는 정확하게 일치하는 괄호입니다. 시도해보십시오. 항상 작동 할 정규 표현식 (또는 유한 오토 마톤)을 빌드 할 수 없습니다. 중첩 깊이를 추적하려면 메모리가 필요합니다.

메모리를위한 스택을 가진 상태 머신은 계산 모델의 다음 강점입니다. 이를 푸시 다운 오토 마톤이라고하며, 문맥이없는 문법에 의해 생성 된 언어를 인식합니다. 여기에서 정확하게 일치하는 괄호를 인식 할 수 있습니다. 실제로 스택은 완벽한 스택 모델입니다.

음, HTML로 충분합니까? 슬프게도, 아니. 어쩌면 모든 태그가 항상 완벽하게 정렬되어있는 사실상 신중하게 검증 된 XML을 위해. 실제 HTML에서는 <b><i>wow!</b></i> 와 같은 스 니펫을 쉽게 찾을 수 있습니다. 이것은 분명히 중첩되지 않기 때문에 올바르게 파싱하기 위해서는 스택이 충분히 강력하지 않습니다.

다음 단계의 계산은 일반적인 문법에 의해 생성되고 튜링 기계에 의해 인식되는 언어입니다. 이는 일반적으로 메모리가 어느 곳에서나 수정 될 수있는 보조 기억 장치가있는 상태 머신 인 사실상 가장 강력한 연산 모델로 받아 들여집니다. 이것은 프로그래밍 언어가 할 수있는 것입니다. 이것은 HTML이 살아있는 복잡성의 수준입니다.

여기에 모든 것을 한 문장으로 요약하려면 일반 HTML을 구문 분석하려면 정규 표현식이 아닌 실제 프로그래밍 언어가 필요합니다.

HTML은 렉싱 (lexing)과 파싱 (parsing)과 같은 다른 방식으로 해석됩니다. 렉 싱 단계는 개별 문자 스트림을 의미있는 토큰으로 분해합니다. 구문 분석 단계에서는 상태와 메모리를 사용하여 토큰을 조합하여 논리적으로 일관된 문서를 만들 수 있습니다.







html css css3 flexbox