## 引言一个当初困扰我许久的设计稿还原问题, 故在此做个简单记录!! 设计稿布局大概如下图所示 * 整体分为左右两部分 * 同时划分了模块 `A` `B` `C` `D` * `A` `B` `C` 之间的间距为 `24px`, `C` `D` 之间的间距为 `64px` * 整体宽度 `100%` 自适应铺满, 并且 `A` `B` `C` `D` 宽度保持一致 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8f2be1706e34c96bc36e9c5be43e00e~tplv-k3u1fbpfcp-zoom-1.image#?w=1501\&h=482\&s=8638\&e=png\&b=e3dada) 那么问题来了, 假设给出下面 `DOM` 结构, 要如何实现上面设计稿要求的自适应等宽布局呢? ```html

``` 当然如果你心里已经有答案了, 欢迎在评论区给出答案, 大家一起探讨探讨!! 如果没有可以看看我这边的一个实现思路... ## 一、3:1 左右布局首先我们先通过 `flex` 布局, 实现 `Left` 和 `Right`, 按照 `3: 1` 进行一个等比例布局, 需要实现的布局效果如下图所示 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b93cfa85a7e4aab876a51ed9da16313~tplv-k3u1fbpfcp-zoom-1.image#?w=1653\&h=119\&s=1433\&e=png\&b=ffa49e) 下面是实现代码 ```html

Left

Right

``` ## 二、四等分布局上面完成 `Left` 和 `Right` 的一个布局, 下面我们将上面的 `DOM` 结构进行一个调整 * `Left` 部分, 增加三个子元素(`div`), 这三个子元素通过 `flex` 布局实现 `1:1:1` 的一个等宽布局 * `Right` 部分, 增加一个子元素(`div`) 需要完成的效果如下图: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f614f61ea924492795edb1ee7bce564f~tplv-k3u1fbpfcp-zoom-1.image#?w=1643\&h=121\&s=1730\&e=png\&b=63cded) 上图布局的一个完整代码如下: ```html

``` ## 三、间距设置(左侧部分) 下面我们先给 `A` `B` `C` 之间设置一个 `24px` 的间距, 实现的效果如下: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7132c853c5e24922bf74a06bd50eba9c~tplv-k3u1fbpfcp-zoom-1.image#?w=1638\&h=120\&s=1800\&e=png\&b=63cded) 相关代码调整如下, 其中 `:not(:last-child)` 选择器表示匹配 `非最后一个元素` ```diff ``` ## 四、调整比例到这里, 由于 `A` `B` `C` 设置了间距, 将导致它们宽度都等量缩小了, 那么变相的 `D` 实际宽度会比 `A` `B` `C` 略大, 如下图所示: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f24671d2c1304e7b9d0d20273a023f32~tplv-k3u1fbpfcp-zoom-1.image#?w=1676\&h=173\&s=7698\&e=png\&b=fbfafa) 这里我们如果要想保证 `A` `B` `C` `D` 之间宽度是一致的, 那么上面 `A` `B` `C` 等量缩小了多少, `D` 只要也等量缩小即可那么问题来了, `A` `B` `C` 等量缩小了多少呢? 其实也很好计算, `A` `B` `C` 之间多了 `24 * 2` 也就是 `48` 的间距, 那么对应对应的 `A` `B` `C` 就应该等量缩小了 `(24 * 2) / 3` 也就是 `16px` 的宽度既然如此, 下面我们也只需要让 `D` 也等量缩小 `16px` 即可, 这里可通过设置 `.right .group` 的 `margin-left` 来实现, 代码调整如下: ```diff .... ``` 修改后的效果图有: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/930dd40f472042bd9e768af45dcc537f~tplv-k3u1fbpfcp-zoom-1.image#?w=1669\&h=174\&s=6874\&e=png\&b=fafafa) ## 五、调整间距最后我们调整下, `D` 和 `C` 之间的间距, 设计稿上间距是 `64`, 在上文中为了保证 `A` `B` `C` `D` 之间宽度一致, 我们已经设置了 `16px` 的间距, 接下来只需要把剩余的 `64 - 16` 也就是 `48` 的间距补充上去就行, 下面是对应的代码变更: ```diff ... ``` 修改后的效果如下: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c94878a79364fba8748960c0ac20a15~tplv-k3u1fbpfcp-zoom-1.image#?w=1670\&h=178\&s=6933\&e=png\&b=fbfbfb) ## 六、完整代码下面是本次演示的一个完整代码, 如果需要可以直接拷贝到编辑器进行调试 ```html

``` ## 七、补充: 剩余空间计算规则 > `Flex` 计算 `可用空间` 的规则: `Flex` 容器的 `内容宽度` 减去所有子项的水平 `外边距`、`内边距`、`边框` 也行你会有疑惑, 上面例子中我们是通过将 `.right .group` 的 `margin-left` 设置为 `16px` 来实现 `A` `B` `C` `D` 等宽效果, 那么这个实现方案是否可以改为为 `.right` 设置 `padding-right` 来实现呢? 这里答案是否定的, 这里主要原因还是在 `Flex` 在计算 `可用空间` 时是要扣除所有子项的水平 `外边距`、`内边距`、`边框`, 所以如果我们为 `.right` 设置了 `padding-right` 那么可用空间就会减少, `A` `B` `C` 也会对应的缩小... 具体的我这边就不做演示了, 好奇的朋友可以自己做个尝试, 下面简单验证下 `Flex` 在计算 `可用空间` 时, 对子项设置了 `padding` 情况下的一个表现, 如下代码: `right` 存在 `padding` 那么, 那么在计算剩余可用空间时, 就不应该包含 `padding` ```html

Left

Right

``` 上面例子的一个效果图: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6676e57ac5f345fb8d26b92e3d010a7a~tplv-k3u1fbpfcp-zoom-1.image#?w=1913\&h=400\&s=22711\&e=png\&b=222326) ## 八、参考文献 * [CSS\_Flexible\_Box\_Layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax) * [How to get flexbox to include padding in calculations?](https://stackoverflow.com/questions/37785345/how-to-get-flexbox-to-include-padding-in-calculations) > 大家好, 我是墨渊君, 如果您喜欢我的文章可以: > - 关注公众号: 「昆仑虚F2E」获取最新文章。 > - GitHub: https://github.com/MoYuanJun > - 个人网站(昆仑虚, 虽然现在没啥东西): https://www.kunlunxu.cc >