本文关键词：弹性盒子做微网站

做微网站这些年，我见过太多同行还在用float去硬扛移动端适配。说实话，那玩意儿真的让人头大。特别是遇到那种复杂的图文混排，或者需要垂直居中的时候，调半天代码，换个手机屏幕又乱了。最近不少客户问我，说现在的H5页面怎么搞才最省事？我一般会建议他们直接用弹性盒子，也就是Flexbox。这玩意儿一旦上手，你会发现以前那些头疼的问题，其实都是自找苦吃。

咱们先说个真事儿。上个月有个做本地生活服务的客户，急需上线一个活动页。页面结构挺复杂，上面是个大Banner，中间是三个并排的功能入口，下面是一堆参差不齐的图文列表。如果用老派的浮动布局，我得写一堆clearfix，还得算margin和padding，稍微不注意，文字就溢出了。最后为了对齐那个按钮，我改了至少五版代码。后来我换了弹性盒子做微网站，整个过程顺畅得让我有点不适应。

具体怎么操作呢？其实没那么玄乎。第一步，给父容器加上display: flex;。这就相当于给这个盒子开了个“智能排列”开关。第二步，决定你是要横向排还是纵向排。大部分微网站的主导航或者功能入口，都是横向的，那就加个flex-direction: row;。如果是像这种列表项，想让他们自动换行，记得加上flex-wrap: wrap;，不然内容多了会挤成一团，体验极差。

这里有个小细节，很多人容易忽略。就是子元素的比例分配。以前我们要算百分比，现在直接用flex: 1;。比如三个入口平分宽度，每个子项都写flex: 1;，浏览器会自动帮你算好间距。当然，如果你想让某个元素特别宽，比如占一半，那就写flex: 2;。这种比例分配的方式，比写死px或者百分比要灵活得多，尤其是面对不同尺寸的屏幕时，弹性盒子做微网站的优势就体现出来了，它不需要你为每个断点写一堆媒体查询。

再说说垂直居中这个老大难问题。以前为了把文字在div里垂直居中，我得设line-height，或者用table-cell，甚至用transform。现在？父容器设display: flex;，然后justify-content: center;和align-items: center;。两行代码搞定。不管里面内容是单行还是多行，也不管高度怎么变，它永远乖乖待在正中间。这对于做微网站来说，简直是救命稻草，因为移动端屏幕高度千奇百怪，这种自适应能力太重要了。

不过，我也得说点实话，弹性盒子也不是万能的。在IE9及以下版本，它是不支持的。虽然现在用IE的人少得可怜，但如果你还要照顾那些老旧的企业内部系统，或者特别保守的客户，可能还得留个心眼。另外，Flexbox在二维布局上很强，但如果你要做那种非常复杂的网格系统，比如像淘宝首页那种密密麻麻的商品流，可能还是Grid布局更合适，或者两者结合使用。但在大多数微网站场景下，Flexbox绝对够用，甚至绰绰有余。

还有个坑要注意，就是默认的主轴方向。很多人加了display: flex;发现元素横着排了，但自己心里想的是竖着排，结果怎么调都调不对。这时候别急着加负margin，先看看是不是主轴方向搞反了。把flex-direction改成column，一切就顺了。这种低级错误，新手最容易犯，我当年也栽过跟头。

最后总结一下，做微网站真的没必要再抱着浮动布局不放。弹性盒子不仅代码简洁，而且维护成本低。当你以后接手别人的项目，看到满屏的clearfix和float，你会感谢现在选择Flexbox的自己。虽然刚开始学习曲线有点陡，但一旦掌握了那种“流式布局”的思维，你会发现写前端代码其实挺有意思的。别怕试错，多动手调调参数，很快你就能体会到那种掌控全局的快感。记住，技术是为了服务业务，能让页面加载更快、适配更准的技术，就是好技术。