别想太多（Flexbox）网格

四年前，我发布了 “别想太多网格”，并引起了不少人的共鸣。即使在当时，我也认为我们可能正处于网格的巅峰时期。几乎每周都有人在推广一个新的网格框架。

那篇文章是我想说：“别害怕！ 你可以自己制作一个网格！你不需要一个复杂的框架。” 它可能没有那么花哨，但这就是我的风格。你可以用一些百分比宽度浮动几个元素，然后就完成了。

如今，如果您准备使用 Flexbox 进行布局，DIY 网格就更容易了。

这通常是我使用的方式

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

.flex-grid {
  display: flex;
}
.col {
  flex: 1;
}

这支持任意数量的列，并且它们会自动等宽且灵活！

想要让它们在小屏幕上变成一列吗？很容易

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

需要间距？您可以向列添加边距。您可以向列添加内边距。我喜欢使用对齐方式来创建列的想法，例如

.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 32%;
}

如果您选择 Flexbox 路线，您现在还可以根据需要更改列的顺序，这对于将更重要的内容保持在源代码中的较高位置以及响应式设计重新排序非常有用。

查看 Chris Coyier 在 CodePen 上的笔 简单的 Flexbox 网格（@chriscoyier）。

我的观点，再次强调：构建网格并不需要使用网格框架。你可以做到！这也不是说 Flexbox 非常简单，您永远不会遇到任何问题。如果您开始使用更多利基 Flexbox 功能，可能会遇到很多边缘情况和奇怪的浏览器支持问题。不过，我们在这里看到的这些内容非常基础，如果您遇到问题，我会感到惊讶。

更多

Philip Walton 已经 撰写了更多关于 Flexbox 网格系统的辉煌成就。

公平地说，网格框架往往相当健壮，许多团队在拥有预定义的类和构建任何类型网格的配方方面取得了成功。如果您有兴趣依靠一个特定于 Flexbox 的网格框架，以下是我知道的一些：Frow、Flexbox Grid 和 Gridlex。