Google Chrome 使用 Flexbox 視窗錨定擴充方向
<p>Google Chrome 中存在一個問題，當元素放置在具有<code>之間有空格</code的<em>相鄰</em> Flex 項目的Flexbox 容器內時，元素會相對於視窗以不同方向展開/折疊> 或<code>center</code> 對齊內容。 </p>
<p>這在 Firefox、IE11、Edge 或 Safari 中不是問題，因為元素始終向下擴展。 </p>
<p>我很好奇：</p>
<ul>
<li>Chrome 的行為是否遵循某些規範？如果有，是哪一個？ </li>
<li>如果不是，那為什麼要在 Chrome 中這樣做？ （恕我直言，點擊觸發器在螢幕外隨機消失是可怕的用戶體驗。）</li>
<li>可以透過某種方式修改或停用 Chrome 的行為嗎？例如。透過 CSS 或元標記？ </li>
</ul>
<p><strong>更新 1：如果可能的話，我已在 chromium bug tracker 上提交了問題 #739860，尋求 Chromium 開發人員的見解/解釋。 </strong></p>
<hr>
<p>下面插入了兩個範例。描述問題的完整測試套件可以在這支筆中找到：https://codepen.io/jameswilson/full/xrpRPg/ 我選擇在本範例中使用 slipToggle，以便展開/折疊運動是動畫的並且對眼。詳細資訊標籤也會發生相同的行為，但還沒有跨瀏覽器支持，並且展開/折疊太卡頓了。</p>
<p><strong>範例 1：Chrome 對準 Flexbox 之間的展開/折疊行為的空格</strong></p>
<p>
$('button').click(function() {
$(this).next().slideToggle();
})</pre>
body {
邊距：30 像素；
字體系列：無襯線字體；
}
在旁邊，
除了div，
概括，
主要的，
按鈕，
詳情 p,
按鈕 p {
背景：rgba(0,0,0,.09);
邊框：無；
內邊距：20px；
保證金：0；
}
.flex容器{
顯示：柔性；
}
在旁邊 {
彈性：1；
位置：相對；
最大寬度：25%；
背景：薄荷奶油；
顯示：柔性；
彎曲方向：列；
位置：相對；
}
aside.space- Between {
justify-content：空間之間；
}
放在一邊.center {
調整內容：居中；
}
主要的 {
彈性：3；
位置：相對；
最大寬度：75%；
背景：愛麗絲藍；
垂直對齊：頂部；
高度：100%；
}
主要> * * {
上邊距：20px；
}
按鈕 p {
顯示：無；
}</pre>
<腳本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;< /腳本>
<節類=“flexcontainer”>
<aside class="space- Between">
頂部側邊欄
底部側邊欄
</旁白>
<主要>
<按鈕>slideToggle
<p>其他瀏覽器：始終向下展開。<br>
Chrome：應始終向下展開，因為頂部側邊欄始終可見。
<p>其他瀏覽器：始終向下展開。<br>
Chrome：應向下展開，同時底部側邊欄和頂部邊欄均可見。但如果您向下滾動足夠遠以使頂部側邊欄超出螢幕，則會向上展開。
<p>其他瀏覽器：始終向下展開。<br>
Chrome：應向下展開，同時底部側邊欄和頂部邊欄均可見。但如果您向下滾動足夠遠以使頂部側邊欄超出螢幕，則會向上展開。
;
</主要>
</節></pre>
</p>
<p><strong>範例 2：Chrome 對居中對齊的 Flexbox 的展開/折疊行為</strong></p>
<p>
$('button').click(function() {
$(this).next().slideToggle();
})</pre>
body {
邊距：30 像素；
字體系列：無襯線字體；
}
在旁邊，
除了div，
概括，
主要的，
按鈕，
詳情 p,
按鈕 p {
背景：rgba(0,0,0,.09);
邊框：無；
內邊距：20px；
保證金：0；
}
.flex容器{
顯示：柔性；
}
在旁邊 {
彈性：1；
位置：相對；
最大寬度：25%；
背景：薄荷奶油；
顯示：柔性；
彎曲方向：列；
位置：相對；
}
aside.space- Between {
justify-content：空間之間；
}
放在一邊.center {
調整內容：居中；
}
主要的 {
彈性：3；
位置：相對；
最大寬度：75%；
背景：愛麗絲藍；
垂直對齊：頂部；
高度：100%；
}
主要> * * {
上邊距：20px；
}
按鈕 p {
顯示：無；
}</pre>
<腳本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;< /腳本>
<節類=“flexcontainer”>
