<p><code>공백</code Expand/collapse> code>center</code> 뷰포트를 기준으로 콘텐츠를 다른 방향으로 정렬합니다. </p>
<p>Firefox, IE11, Edge 또는 Safari에서는 요소가 항상 아래쪽으로 확장되므로 이는 문제가 되지 않습니다. </p>
<p>궁금합니다:</p>
<li>Chrome은 특정 사양에 따라 작동하나요? 그렇다면 어느 것입니까? </li>
<li>그렇지 않다면 왜 Chrome에서 하시겠습니까? (IMHO, 화면 밖에서 무작위로 사라지는 트리거를 클릭하는 것은 끔찍한 사용자 경험입니다.) </li>
<li>어떤 방식으로든 Chrome의 동작을 수정하거나 비활성화할 수 있나요? 예를 들어. CSS 또는 메타 태그를 통해? </li>
</ul>
<p><strong>업데이트 1: 가능하다면 Chromium 개발자로부터 통찰력/설명을 얻기 위해 Chromium 버그 추적기에 문제 #739860을 제출했습니다. </strong></p>
<시간>
<p>아래에 두 가지 예가 삽입되어 있습니다. 문제를 설명하는 전체 테스트 모음은 다음 펜으로 찾을 수 있습니다: https://codepen.io/jameswilson/full/xrpRPg/ 저는 펼치기/접기 동작이 애니메이션화되고 눈길을 끌 수 있도록 이 예에서 슬립토글을 사용하기로 선택했습니다. 세부정보 탭에서도 동일한 동작이 발생하지만 아직 브라우저 간 지원이 없으며 확장/축소가 너무 버벅거립니다.</p>
<p><strong>示例 1：Chrome 针对对齐 Flexbox gee间的空格的車开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">본체 {
여백: 30px;
글꼴 모음: 산세리프;
}
곁에,
div를 제외하고,
요약,
기본,
단추,
세부 사항 p,
버튼 + p {
배경: rgba(0,0,0,.09);
테두리: 없음;
패딩: 20px;
여백: 0;
}
.flexcontainer {
디스플레이: 플렉스;
}
제쳐두고 {
플렉스: 1;
위치: 상대;
최대 너비: 25%;
배경: 민트크림;
디스플레이: 플렉스;
플렉스 방향: 열;
위치: 상대;
}
side.space-between {
내용 정당화: 공백 사이;
}
옆으로.센터 {
내용 정당화: 센터;
}
기본 {
플렉스: 3;
위치: 상대;
최대 너비: 75%;
배경: aliceblue;
수직 정렬: 상단;
높이: 100%;
}
메인 > * + * {
여백 상단: 20px;
}
버튼 + p {
디스플레이: 없음;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</스크립트>
<section class="flexcontainer">
<class="space-between">
<div>상단 사이드바</div>
<div>하단 사이드바</div>
</제쳐두고>
<메인>
<div>
<버튼>슬라이드토글</버튼>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 상단 사이드바가 항상 표시되므로 항상 아래쪽으로 확장되어야 합니다.</p>
</div>
<div>
<button>slideToggle(보통 아래로 확장됨)</button>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 하단 사이드바와 상단 사이드바가 모두 보이는 동안 아래쪽으로 확장되어야 합니다. 하지만 상단 사이드바가 화면에서 벗어날 정도로 아래로 스크롤하면 위쪽으로 확장됩니다.</p>
</div>
<div>
<button>slideToggle(보통 아래로 확장됨)</button>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 하단 사이드바와 상단 사이드바가 모두 보이는 동안 아래쪽으로 확장되어야 합니다. 하지만 상단 사이드바가 화면에서 벗어날 정도로 아래로 스크롤하면 위쪽으로 확장됩니다.</p>
</div>
</메인>
</p>
<p><strong>示例 2：Chrome 对居中对齐의 Flexbox 형식 확장/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">본체 {
여백: 30px;
글꼴 모음: 산세리프;
}
곁에,
div를 제외하고,
요약,
기본,
단추,
세부 사항 p,
버튼 + p {
배경: rgba(0,0,0,.09);
테두리: 없음;
패딩: 20px;
여백: 0;
}
.flexcontainer {
디스플레이: 플렉스;
}
제쳐두고 {
플렉스: 1;
위치: 상대;
최대 너비: 25%;
배경: 민트크림;
디스플레이: 플렉스;
플렉스 방향: 열;
위치: 상대;
}
side.space-between {
내용 정당화: 공백 사이;
}
옆으로.센터 {
내용 정당화: 센터;
}
기본 {
플렉스: 3;
위치: 상대;
최대 너비: 75%;
배경: aliceblue;
수직 정렬: 상단;
높이: 100%;
}
메인 > * + * {
여백 상단: 20px;
}
버튼 + p {
디스플레이: 없음;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</스크립트>
<section class="flexcontainer">
<aside class="center">
<div>중앙 사이드바</div>
</제쳐두고>
<메인>
<div>
<button>slideToggle(보통 아래쪽으로 확장됨)</button>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 일반적으로 아래쪽으로 확장됩니다. 컨테이너의 상단 가장자리가 뷰포트 밖으로 스크롤되면 양방향으로 확장됩니다.</p>
</div>
<div>
<버튼>슬라이드토글</버튼>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 일반적으로 아래쪽으로 확장됩니다. 컨테이너의 상단 가장자리가 뷰포트 밖으로 스크롤되면 양방향으로 확장됩니다.</p>
</div>
<div>
<button>slideToggle(보통 아래쪽으로 확장됨)</button>
<p>기타 브라우저: 항상 아래쪽으로 확장됩니다.<br>
Chrome: 일반적으로 아래쪽으로 확장됩니다. 컨테이너의 상단 가장자리가 뷰포트 밖으로 스크롤되면 양방향으로 확장되지만, 중앙 사이드바가 뷰 밖으로 스크롤되면 다시 아래쪽으로 확장이 다시 시작됩니다.</p>
</div>
</메인>
</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Flex 컨테이너에 다음 코드를 추가하세요:
溢出锚：无이렇게 하면 상자가 위쪽으로 확장되는 "스크롤 앵커링"이라는 Chrome 기능이 비활성화됩니다(개정된 코드 펜 ).
Chrome에서는 확장 가능한 상자의 위/아래 방향이 레이아웃 자체가 아닌 뷰포트의 스크롤 위치에 따라 결정됩니다.
사용자 환경을 개선하기 위해 Chrome은 이 동작에 대해 독특한 접근 방식을 취합니다.
기본적으로 DOM 요소를 현재 스크롤 위치에 바인딩합니다. 화면에서 이 특정("앵커") 요소를 이동하면 스크롤 위치(있는 경우)에 대한 조정이 결정됩니다.
이 방법을 "스크롤 앵커링"이라고 부릅니다. 이 페이지에는 알고리즘이 설명되어 있습니다. https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
이 동작은 현재 Chrome에만 적용되지만 Google에서는 표준화를 추진하고 있습니다.
스크롤 앵커 문서에 따르면
overflow-anchor: none를 해당 요소에 적용하면 스크롤 앵커 조정이 비활성화됩니다.추가 정보: