前端开发中，布局一直是一个重要的问题。特别是在使用了 Flexbox 布局的情况下，开发者在处理图片尺寸大小变化等问题时常常会遇到“图片回流”的问题。本文就围绕这个问题进行总结，希望对前端开发者有所帮助。
一、什么是 Flexbox 布局
Flexbox 布局也称为 Flexible Box Layout，是一个用来实现网页布局的 CSS3 模块。它通过提供一个强大和灵活的布局方式，来为开发者创建一种适应不同设备以及屏幕尺寸的页面排版方案。具体来讲，Flexbox 布局是一个基于弹性盒子的布局模型，通过将一组元素放置在弹性容器中，可以轻松地控制它们的对齐方式、分布等属性。
二、什么是图片回流
在网页设计中，如果图片尺寸没有按照网页布局的设计要求进行设置，当图片尺寸改变时，页面就会出现所谓的“回流”现象，也就是页面的重新排版，导致页面闪烁等不良效果。这种情况下，我们需要通过特定的方式来处理图片回流的问题。
三、Flexbox 布局下处理图片回流的方法
下面我们就总结几种 Flexbox 布局下处理图片回流的方法：
1. 设置图片的宽高属性
最基础的方法就是为图片元素设置宽高属性，如下所示：
img {
width: 100%;
height: auto;
}这种方式适用于 Flexbox 容器的子元素是块级元素（即默认宽度为 100%），可以根据容器大小自适应变化。当容器中的图片尺寸发生变化时，图片的宽度会自适应，默认高度是根据实际图片的宽高比例设置的。
2. 使用 Flexbox 新属性 object-fit
CSS3 中引入的 object-fit 属性可以让图片自适应容器大小，同时可以取代传统的 background-image+background-size 实现图片的显示。object-fit 属性可以设置5个值：fill（默认值）、contain、cover、none、scale-down。
img {
object-fit: cover;
width: 100%;
height: 100%;
}这种方式适用于希望图片始终铺满整个容器的情况，当图片的尺寸改变时，图片可以不脱离自己的父容器，自动缩放并且保持宽高比例。
3. 防抖节流
当图片加载时，会触发多次 resize 事件，导致页面多次重排，影响性能。因此，我们可以使用防抖节流的方式控制事件的触发次数。
-- -------------------- ---- -------
-------- ------------ ------ -
--- -----
------ ---------- -
-------------------
----- - ------------- -- -
-------------- ----------
-- ------
-
-
--------------------------------- ------------------- -
-- --------------
-- -----在防抖函数的封装中，可以将事件执行的函数（本例为处理图片回流的函数）作为参数，在 resize 事件被触发时，由 debounce 函数处理事件的触发次数，并在相应的时间内只执行一次事件处理函数，从而减少页面的重排。
四、总结
通过上述总结的三种方式，我们可以高效地处理图片回流问题。尤其是在实际开发过程中，我们可以根据特定的场景或需求，综合考虑使用上述的各种方法来处理图片回流问题，从而达到更优的用户体验和页面性能。
五、参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f096b968c7c53b012665f