【面试题flex】关于弹性盒子中 flex: 0 1 auto 的一系列问题

第一问 弹性盒子中 flex: 0 1 auto 表示什么意思 三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。 1.flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。 2.flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。 3.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。 第二问 求最终 left、right 的宽度 样式说明 父元素 container 的 width 为 600px left 元素 flex-grow 为 1，flex-shrink 为 2，flex-basis 为 500px right 元素 flex-grow 为 2，flex-shrink 为 1，flex-basis 为 400px 解题 left 和 right 的主轴空间和大于父元素的宽度 超了 300px 500 + 400 = 900 - 600 = 300 总权重为 2 * 500 + 1 * 400 = 1400 超出了 所以是收缩 则分别的收缩长度 left：300 * 2 * 500 / 1400 = 214.28 right: 300 * 1 * 400 / 1400 = 85.72 最终宽度 leftWidth：500 - 214.28 = 285.72 rightWidth：400 - 85.72 = 314.28 第三问 求最终 left、right 的宽度（变形） 样式说明 父元素 container 的 width 为 600px left 元素 flex-grow 为 1，flex-shrink 为 2，flex-basis 为 300px right 元素 flex-grow 为 2，flex-shrink 为 1，flex-basis 为 200px 剩余空间，是超出的情况 600 - 300 - 200 = 100 所以多出来的均分则是用 flex-grow 100 / (1 + 2) = 33.33 所以最后宽度 leftWidth：300 + 1 * 33.33 = 333.33 rightWidth：200 + 2 * 33.33 = 266.67 原文链接： 弹性盒子中 flex: 0 1 auto 表示什么意思 求最终 left、right 的宽度 求最终 left、right 的宽度（变形）

本文章由javascript技术分享原创和收集