最近在浏览维基萌的时候发现了一个因为加载顺序导致的flex布局抖动现象，想着挺有意思的就记录一下解决思路和方案。

现象

有时候在浏览维基萌的时候偶尔会一瞬间出现上图的布局。

然后一晃而过恢复成了正常布局。

这个现象只有打包发布到服务器上才会出现，本地调试则复现不出来。

分析原因

起初怀疑右侧侧边栏的内容可能引发BUG。于是清空了右侧侧边栏，只保留一个空框架，但问题依旧存在。

后来思考为什么问题只在发布到服务器上时出现，而且复现问题时右侧侧边栏似乎消失了。这联想到可能与网速有关。

于是，在本地调试环境中通过限制浏览器流量成功复现了问题，这样问题就更容易解决了。

经过一番分析，找到了问题的根源。首先，维基萌的PC界面采用三栏布局，通过flex固定左侧菜单和右侧侧边栏的宽度，中间内容部分则分配剩余空间。HTML的加载是自上而下的，当由于网络原因导致页面加载较慢时，有可能在下载到中间内容部分时，右侧侧边栏尚未下载完毕，中间内容部分就先显示出来了。

基于flex布局的设定，由于右侧侧边栏暂时不存在，中间内容部分会占用所有剩余空间。随后，右侧侧边栏加载进来，就会造成界面短暂的抖动。

解决办法

解决办法也很简单，flex布局还有一个order的属性。

CSS中的order属性用于控制灵活盒子布局（flexbox）中的项目顺序。通过设置order属性，可以改变flex容器中的子元素在布局中的排列顺序，而不需要改变HTML的顺序。

首先将原本的HTML顺序从【菜单->内容->侧边栏】改成【菜单->侧边栏->内容】。

然后再通过order属性，指定三个元素的顺序为【菜单->内容->侧边栏】即可。

具体到CSS为：

.blog-layout-body {
  /* 前略 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.blog-layout-left-body {
  /* 前略 */
  order: 0;
}
.blog-layout-content-body {
  /* 前略 */
  order: 1;
}
.blog-layout-right-body {
  /* 前略 */
  order: 2;
}

其中【justify-content: space-between】指定两端对齐，可以防止在【内容】没加载时，【菜单】和【侧边栏】出现布局的抖动。

通过以上修改就可以让对应的元素在加载前和加载后都固定在一个位置，从而防止页面的抖动。