如何预获取多Flex项目设为flex:1 0 auto时的最大尺寸？

不用先给实际项目设置flex: 1 0 auto;也能拿到对应的尺寸，核心思路是用克隆元素模拟布局，具体步骤如下：

• 遍历所有目标flex项目，对每个项目执行以下操作：
  1. 创建该项目的克隆节点，完整复制它的内容、字体、padding、border等所有样式，确保克隆元素和原元素的布局条件完全一致
  2. 修改克隆元素的flex属性为flex: 1 0 auto;，同时设置position: absolute; left: -9999px;（将其放到视野外，避免干扰页面现有布局）
  3. 将克隆元素添加到DOM树中（比如原flex容器或body节点下）
• 用cloneElement.getBoundingClientRect().width或cloneElement.offsetWidth获取每个克隆元素的宽度，记录其中的最大值
• 移除所有克隆元素，避免占用页面资源
• 给所有原项目添加过渡动画（比如transition: width 0.3s ease;），再将它们的flex属性改为flex: 1 0 [获取到的最大宽度];，或者直接设置width: [最大宽度]，即可实现从220px到最大auto宽度的平滑切换

如果不想用克隆，也可以临时修改原元素的flex属性，获取宽度后再改回去，但这种方法可能会导致页面瞬间闪烁（元素较多时更明显），不如克隆法稳妥。

内容的提问来源于stack exchange，提问作者Ilya Loskutov