<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：應始終向下展開，因為頂部側邊欄始終可見。

    

    

      slideToggle（通常向下展開）
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：應向下展開，同時底部側邊欄和頂部邊欄均可見。但如果您向下滾動足夠遠以使頂部側邊欄超出螢幕，則會向上展開。

    
    
    

      slideToggle（通常向下展開）
      <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”>