CSS 弹力盒子
source link: https://yihui.org/cn/2017/07/css-flexbox/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS 弹力盒子
谢益辉 / 2017-07-12
现代网页布局中，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 杂志主题的响应式设计就靠它做出来的。
← 命名 响应式图片的浏览器原生支持 →
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK