现代网页布局中，Flexbox 简直不能更方便。我经历了旧时代的 float: left; 和 clear: both，所以能深切体会 Flexbox 的便利。一旦碰了 float 属性，就像一脚踏进地狱，你会有擦不完的屁股。更别说什么响应式设计了。
Flexbox 好像还没什么中文翻译，我索性译为超级弹力盒子好了，Q 可 Q，非常 Q。如果找它的资料，第一个应该会是 CSS Tricks 网站。我作为前端界的草履虫，平时捣鼓 CSS 基本就指着这个网站和爆栈网活了，有时候也看看 W3CSchools，虽然它被很多仁波切吐槽。若要严肃认真，我也会看看 MDN。
最近两天因为给统计之都新网站设计主题，需要多栏排版，所以放狗搜到了这个页面 Responsive Multi-Column Lists with Flexbox，碰巧解决了我长久以来的关于格子布局的一个难题。我一直不知道如何让 N 个盒子（N >= 3）在同一行上等间距分布，并且第一个盒子贴左侧边，最后一个盒子贴右侧边，每两个盒子之间都留一定空白间距。简单设置每个盒子的左边距或右边距是不行的，因为那样会导致要么第一个盒子不贴边，要么最后一个盒子不贴边。这个页面告诉了我，把这些盒子的父元素向左移动 X 像素（比如 margin-left: -10px），然后每个盒子的左边距设置为 X 像素即可（比如 margin-left: 10px），这样第一个盒子正好贴左侧边。就这么简单。终于了却了豆腐块爱好者的一个夙愿。
这个页面也介绍了如何把弹力盒子和响应式设计结合起来，解释地非常好。 我的 Hugo 杂志主题的响应式设计就靠它做出来的。
赞赏
作为一名没有固定工作的自由职业者，我非常感谢您通过捐赠的方式来支持我的写作和开源软件开发。当然，捐赠纯属自愿。无论金额多少，都是一片诚挚的心意。支付方式如下：
| 微信 | ← 奋力支开它俩 → | 支付宝 |
|---|---|---|
 |
其它爱心通道 ↓ Venmo: @yihui_xie Zelle: xie@yihui.name PayPal: xie@yihui.name |
 |
若使用 Venmo/Zelle/Paypal，请添加备注“gift”或“donation”，以免捐赠被视为我的可税收入。若使用 Paypal，支付类型请选 Family and Friends，而不要选 Goods and Services。
在不影响生活的前提下，我会将收到的捐赠以尽量大的比例回馈给开源社区和慈善机构。作为参考，2024-25 年间我共收到约三万美元捐赠，完税后我转手捐出了一万五千美元。