我在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>
web应用程序中布局发生变化的原因有很多。其中一些非常容易检测和解决，而另一些则不然。以下是累积布局偏移的原因列表：
-
没有保留尺寸(没有适当的宽度和高度值(的图像、视频和UI对象的显示
-
动态或异步添加或删除没有占位符宽度和高度值的DOM元素
-
无需用户操作即可动态调整UI元素的大小
-
第三方脚本或广告提供商在没有保留占位符的情况下插入具有适当尺寸的广告横幅。
-
某些CSS Flexbox属性的使用
-
设置动画或转换导致UI回流的CSS属性，如填充、边距、高度、宽度、顶部、左侧等
除非明确指定，否则当web浏览器绘制flexbox项目时，它不知道项目的确切尺寸，因为flexbox的性质必须计算这些项目。
弹性项目可以根据可用空间进行收缩或弯曲(增长(。这就是问题所在。浏览器逐帧绘制DOM元素。因此，在渲染完所有项目之前，Flex项目的准确尺寸是已知的。
如果误用，某些柔性属性会导致布局偏移。它们包括：
-
Align-items属性，它改变了沿交叉轴的柔性项目流 -
Justify-content属性，该属性改变了沿主轴的弹性项目流对齐自身 -
flex，其导致弹性项目基于剩余空间增长 -
使用边距水平或垂直推动弹性项目
修复flexbox项引起的布局偏移的最简单方法是给项宽度值。这将有助于浏览器做出决策。通过具有指定的宽度，柔性盒项目可以跨框架适当定位。
问题不一定是flexbox，而是以动态高度加载的图像。此外，请确保在内联中添加此CSS，而不是外部文件，它将随页面一起加载，不会导致布局偏移。
如果有图像，唯一不改变布局的方法就是将它们设置为固定高度。
这个例子不应该导致布局偏移，它将图像加载到16:9容器中，该容器可以在加载任何图像之前由浏览器计算。你可以使用相同的原理，根据你需要的任何比例调整十六九类的填充底部。
<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