如何让CSS flex最后一个子项延伸至视口右边缘？calc计算逻辑是什么

核心布局前提 #

这类效果是定宽居中容器下，子元素突破容器限制延伸到视口边缘的经典实现，成立的基础条件是：

• 外层内容容器为固定宽度，通过margin: auto实现水平居中
• 当视口宽度大于容器宽度时，容器左右两侧到视口边缘的留白完全相等，单侧留白宽度固定为 (100vw - 容器宽度) / 2，这就是calc公式前半段的来源

601px这类数值的本质 #

你判断的完全正确，这个值不是手动微调凑出来的硬编码，它是需要延伸的那个flex项，在容器栅格内分配到的固有宽度（已扣减列间距）：

原页面主容器宽度为1224px，采用3栏非对称栅格：2个窄栏+1个宽栏，宽栏扣完列间距后的宽度刚好是601px；你自己demo里的401px，本质就是900px宽容器下，宽栏扣完间距后的固有宽度，手动微调能对齐只是刚好凑到了这个值而已。

公式生效的原理 #

整个calc逻辑没有任何黑魔法，完全是几何计算的结果：

1. 居中容器的右边缘到视口右边缘的距离，就是前面算的单侧留白(100vw - 容器宽度)/2
2. 给要延伸的flex项设置flex-shrink: 0，禁止它被flex布局压缩宽度
3. 给这个元素设置宽度为「自身在容器内的固有宽度 + 容器右侧的留白宽度」，元素就会从自己在flex流里的原有位置开始，一直铺满到视口最右边缘，宽度刚好严丝合缝，不会多也不会少

原页面的calc(((100vw - 1224px)/ 2) + 601px)完全就是套这个逻辑写的，所以不管视口宽度怎么变（只要不小于容器定宽），宽卡片都能自动贴住视口右边缘，不需要额外写媒体查询适配。

复现注意事项 #

• 不要漏加flex-shrink: 0：flex默认会开启元素收缩，不加的话元素宽度会被相邻项挤压，计算值完全失效
• 固有宽度要扣减列间距：如果给所有flex项都加了右外边距，计算固有宽度的时候要把延伸项自己的外边距扣掉，不然会出现宽度溢出一点的问题
• 同类效果可以直接套公式：要做元素延伸到视口左边缘的效果，只要把元素放在flex顺序的第一位，宽度设为「左侧留白宽度 + 元素固有宽度」即可，甚至可以实现左右两个元素同时突破容器、分别贴住视口左右边缘的布局。

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