Flex Box - CLS（累積布局偏移）

Question

我在使用 Flex Box 順序進行 CLS 移位 (.28) 時遇到問題，或者我需要一種方法來重新排序 div。 高度未知，因此不能使用邊距等。每個塊中的內容都很大（圖像等）。 此代碼不會產生 CLS 問題，因為它只是一個小示例。 我也測試過網格，但它的 CLS 更高。 有沒有不同的方法來翻轉訂單而不使用彈性框？

這是代碼：

<style>
    .layoutflex {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
       -ms-flex-direction: column;
       flex-direction: column;
       flex-shrink: 0;
    }

    .layoutflex .topflex {
        order: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
    }

    .layoutflex .bottomflex {
        order: 0;
        -ms-flex-order: 0;
        -webkit-order: 0;
    }

</style>

<div class="layoutflex">
<div class="topflex">Row 1</div>
<div class="bottomflex">Row 2</div>
</div>

Answer 1

web 應用程序中布局偏移的原因有很多。 其中一些非常容易檢測和解決，而另一些則不然。 以下是累積布局偏移的原因列表：

1. 圖片、視頻和 UI 對象的顯示沒有保留尺寸（沒有適當的寬度和高度值）

2. 動態或異步添加或刪除沒有占位符寬度和高度值的 DOM 元素

3. 無需用戶操作即可動態調整 UI 元素的大小

4. 第三方腳本或廣告提供商插入的廣告橫幅沒有帶有適當尺寸的預留占位符。

5. 使用某些 CSS Flexbox 屬性

6. 動畫或過渡 CSS 導致 UI 回流的屬性，例如 Padding、Margin、Height、Width、Top、Left 等

除非明確指定，否則當 web 瀏覽器繪制 flexbox 項目時，它不知道項目的確切維度，因為由於 Flexbox 的性質，它們必須被計算。

彈性項目可以根據可用空間收縮或彎曲（增長）。 這就是問題所在。 瀏覽器在框架中一點一點地繪制 DOM 元素。 因此，在所有項目都被渲染之前，Flex 項目的准確尺寸是已知的。

如果使用不當，某些 flex 屬性會導致布局偏移。 他們包括：

1. Align-items屬性改變彈性項目沿交叉軸的流動

2. Justify-content屬性，它改變了彈性項目沿主軸的流動

3. flex導致彈性項目根據剩余空間增長

4. 使用邊距水平或垂直推動彈性項目

修復由 flexbox 項目引起的布局偏移的最簡單方法是為項目提供寬度值。 這將有助於瀏覽器做出決策。 通過指定寬度，flexbox 項可以跨幀適當定位。

Answer 2

問題不一定是 flexbox，而是以動態高度加載的圖像。 此外，請確保添加此 CSS 內聯而不是外部文件，它將與頁面一起加載並且不會導致布局偏移。

如果您有圖像，唯一沒有布局變化的方法是將它們設置為固定高度。

此示例不應導致布局偏移，它將圖像加載到 16:9 容器中，瀏覽器可以在加載任何圖像之前計算該容器。您可以使用相同的原理，在 16-9 上調整 padding-bottom class 到您需要的任何比例。

<div style="max-width:500px;margin:0 auto;">
  <div class="layoutflex">
    <div class="topflex">
      <div class="sixteen-nine">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" title="doggo" />
      </div>
    </div>
    <div class="bottomflex">
    <div class="sixteen-nine">
        <img src="https://i.imgur.com/Y8WHhk2.jpg" title="bear" />
      </div>
    </div>
  </div>
</div>

<style>
.layoutflex {
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
    }

.layoutflex .topflex {
  order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
}

.layoutflex .bottomflex {
  order: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
}

.sixteen-nine {
  padding-bottom:56.25%;position: relative
}
.sixteen-nine img {
  position: absolute;
  top:0;left: 0;
  width: 100%;height: 100%;
  object-position: center;
  object-fit: cover
}
</style>

代碼筆： https://codepen.io/nonsintetic/pen/QWqNENd