用flex做的网站

这行干七年了，真不是吹牛。前阵子有个刚入行的小兄弟，拿着个设计稿问我：“哥，这布局用Flex写是不是特省事？”我看了一眼那稿子，心里咯噔一下。这哪是省事，这是给自己挖坑啊。

很多人觉得用flex做的网站就是快，拖拽一下，两边对齐，完事。确实，做那种简单的企业展示页，Flex 简直是神器。两行代码搞定左右分栏，比当年搞 float 布局爽多了。但是，一旦需求稍微复杂点，比如那种后台管理系统，或者电商的大促页面，Flex 的短板就暴露无遗了。

我去年接了个单子，是个二手书交易平台。客户非要移动端优先，说现在大家都用手机。我想着用 Flex 响应式挺方便啊，就上手了。结果做到中间，出问题了。有个商品列表，左边是图，右边是文字。在手机上好好的，一放大屏幕，文字换行了，但是图片的高度没跟着变，导致整个卡片歪歪扭扭的。

那时候我盯着屏幕看了半天，代码没报错，浏览器也没提示。就是视觉上不对劲。最后没办法，硬是加了一堆 media query 去微调。你看，这就是用flex做的网站常见的坑。它虽然灵活，但缺乏那种“刚性”的约束感。

还有个更坑的。以前有个做本地生活服务的客户，页面里有很多圆形的头像和标签。我想着用 Flex 居中多方便啊。结果在老版本的安卓机上，那些圆形头像直接变成了椭圆。客户气得差点退款。后来查了半天，才发现是某些老旧内核对 Flex 的某些属性支持不全。这种兼容性鬼故事，只有真正踩过的人才懂。

当然，我不是说 Flex 不好。相反，我现在新项目还是首选 Flex。但它不是万能的。你得知道它的脾气。比如，它默认是主轴方向布局，如果你非要搞个复杂的网格状布局，非要用 Flex 去模拟，那代码写得自己都看不懂。

我有个朋友，搞了个用flex做的网站做博客，初期上线挺快。但后来加了个评论功能，评论框的字数限制和自动换行怎么都调不好。最后不得不引入 Grid 布局来辅助。你看，技术选型这东西，没有绝对的好坏，只有适不适合。

别听那些培训机构说“学会 Flex 走遍天下”。那是骗小白的。真正的老手，都知道什么时候该用 Flex，什么时候该用 Grid，什么时候干脆用 table 布局（别笑，真有用 table 做邮件模板或者简单表格更稳的时候）。

我见过太多人为了炫技，非要把所有布局都塞进 Flex 容器里。结果代码臃肿，加载慢，还难维护。记得有个案例，一个用flex做的网站，首屏加载时间居然过了 3 秒。排查发现，是因为嵌套层级太深，Flex 计算开销太大。

所以，兄弟们，别盲目崇拜。用 flex 做的网站确实能提高效率，但前提是你要懂它的边界。别为了用而用。

我自己现在写代码，习惯先画草图。如果是简单的左右、上下结构，毫不犹豫 Flex。如果是二维的网格，果断 Grid。如果是那种需要严格对齐的表单，有时候甚至用定位。

别怕麻烦。前期多花十分钟思考，后期能省十个小时调试。这才是咱们这行的生存之道。

最后说句实在话，用flex做的网站在现在这个年代，依然是主流。但别把它当成唯一的救命稻草。多看看源码，多踩踩坑，你会发现，代码这东西，就像人一样，你得了解它的性格，才能相处融洽。

别总想着走捷径。捷径往往是最远的路。

本文关键词：用flex做的网站