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

Question

I am having issues with CLS shifting (.28) with Flex Box order or I need a way to reorder the divs. The heights are not known so can't use margin, etc. The content is large (images, etc) in each block. This code does not product a CLS issue because it is just a small example. I have also tested grids but that has even higher CLS. Is there a different way to flip the order and not use flex box?

Here is the code:

<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

There are many causes of Layout shifts in a web application. Some of them are very easy to detect and resolve, while others are not. Below is a list of the causes of Cumulative Layout Shift:

1. The display of images, videos and UI objects without reserved dimensions (without appropriate width and height values)

2. The dynamic or asynchronous addition or removal of DOM Elements without a placeholder width and height values

3. Dynamic resizing of UI elements without a user action

4. Third-party scripts or ad providers inserting ad banners without a reserved placeholder with appropriate dimensioning.

5. The use of certain CSS Flexbox properties

6. Animating or transitioning CSS properties that cause UI reflows, such as Padding, Margin, Height, Width, Top, Left, etc

Unless if explicitly specified, when web browsers paint flexbox items, it does not know the exact dimension of the items as they have to be computed because of the nature of Flexbox.

Flex Items can shrink or flex (grow) depending on the available space. This is where the problem lies. Browsers draw DOM elements bit by bit in frames. Hence, the accurate dimension of a Flex item is known until all items have been rendered.

Certain flex properties cause Layout Shifts if misused. they include:

1. Align-items property which alters the flow of flex items along the cross axis

2. Justify-content property, which alters the flow of flex items along the main axis Align-self

3. flex which causes a flex item to grow based on the leftover space

4. Use of Margins to push flex items horizontally or vertically

The simplest method to fix layout shifts caused by flexbox items is to give the items width values. This will help the browser in decision making. By having specified widths, flexbox items can be positioned appropriately across frames.

Answer 2

It's not flexbox necessarily that's the problem, it's the images loading in with dynamic heights. Also, make sure to add this CSS in-line instead of an external file, it will load with the page and not cause a layout shift.

If you have images the only way to not have layout shifts is to set them to fixed heights.

This example shouldn't cause a layout shift, it loads the images inside a 16:9 container that can be calculated by the browser before any images load in. You can use the same principle, adjusting the padding-bottom on the sixteen-nine class to whatever propotions you need.

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

Codepen: https://codepen.io/nonsintetic/pen/QWqNENd