原文:Don’t Overthink It (Flexbox) Grids

作者:Chirs Coyier

https://css-tricks.com/dont-overthink-flexbox-grids/

四年前,我贴出了一篇“Don’t Overthink It Grids”,它与一些人产生了共鸣。在当时,那可能是最高明的栅格系统。

那篇文章是我说道:“不要害怕,我们可以自己做一个栅格系统,不需要复杂的框架!”。它可能不是很花哨,不过你可以以一定比例的宽度漂浮一些元素。

现在,如果你学会玩转了 flexbox 布局,DIY 栅格系统就变得更容易了。

我现在经常用到的 HTML:

CSS:

这可以支持任意数量的列,它们都是自动相等的宽度,非常灵活!

想让它们在小屏设备上也有用?很简单:

CSS:

需要间隔?可以添加缩进和填充。我喜欢用对齐来创建列,比如:

如果你学会 Flexbox 的方法,也可以按需更改列,这可以保持更多的重要内容以及响应设计的调整。

例子,HTML:

SCSS:

效果:
效果

再次重申我的观点:不需要你用一个栅格框架来构建一个栅格系统。你能行的!这也并不代表 Flexbox 就简单,不会有任何问题。你可能在用 flexbox 的时候会遇到很多奇怪的事情。希望这篇文章希望对你有用,如果你有问题,也请提给我。

发表评论

电子邮件地址不会被公开。 必填项已用*标注