别把 (Flexbox) 栅格想得太复杂

编者按：本文是讲CSS Flexbox的，由奇舞团负责人月影翻译，英文原文链接：?https://css-tricks.com/dont-overthink-flexbox-grids/

四年前，我发布了一篇文章“别把栅格想得太复杂”，引起了一些人的共鸣。甚至在更早的时候，我们可能就已经把栅格发挥到极致了。那时候几乎每星期都有人推广新的栅格框架。

那篇文章中我的观点是：“怕什么！你可以自己实现一个栅格！你不需要一个复杂的框架。” 这个主张虽然没啥特别的，但却是我的真实想法。你只要用百分比宽度浮动几个元素，就可以收工。

在今天，如果你已经学会使用 flexbox 布局，自定义栅格甚至更简单了。

下面是我通常采用的做法：

<div class="flex-grid"> ?"col"></div>></div>
</div>

.flex-grid { ?display: flex;
}

col  ?flex 1}

上面的代码支持任意列数，它们能自动等宽并且可以自适应宽度！

希望它们在窄屏下排成一列？很简单：

@media (maxwidth400px) ? ? ?display block;}
}

需要列与列间隔？你可以添加 margin 到列上。你也可以添加 padding 到列上。我喜欢使用 宽度补齐（justification）的思路来创建列，例如：

gridthirds  ?justifycontent spacebetween ?width32%;
}

如果选择用 flexbox，你也拥有在需要的时候改变列的顺序的能力，这对于想要在响应式设计调整中让较重要的内容保持在前部展现很有好处。

看具体例子：?Easy Flexbox Grid（http://codepen.io/chriscoyier/pen/bedKLV/?）。

再一次强调我的观点：你并不需要依赖一个栅格框架来建立栅格。你可以自己来实现！这也不是说 flexbox 是很容易的，容易到你从来不会遇到问题。如果你更深入使用 flexbox 特性，会有很多边界情况和浏览器支持问题使得你可能陷入其中。不过我们这里考虑的问题非常简单，所以如果这也有问题，我会感到非常惊讶。

更多内容

Philip Walton 写了一篇关于 flexbox 栅格系统的高级文章（https://philipwalton.github.io/solved-by-flexbox/demos/grids/）。

公平地说，栅格框架往往是相当健壮的，许多团队在使用框架预定义的 class 和规则来创建所需的各种各样的栅格上取得成功。如果你有兴趣学习基于 flexbox 实现的栅格框架，这里有一些我所知道的框架：Frow,?Flexbox Grid,以及?Gridlex。

注：文中链接或者demo请通过点击阅读原文进行了解

如果大家喜欢这篇文章，可以转发给你的朋友，如果你还没有关注奇舞周刊，欢迎关注！

奇舞周刊

————————————

专注精品Web技术

长按二维码，关注奇舞周刊

▼