用 Flexbox 实现简单的 CSS Grid 布局

在实际的开发过程中遇到这样的问题：在一个父元素中有很多子元素，希望这些子元素按行展示，每一行 2 （或者 n）个，还要求每一行的两个子元素之间有固定的间距。这种时候最简单的实现方式就是 grid，但是由于兼容性问题，本文介绍了一种只使用 flex 的实现。具体效果如下图所示：

Grid 布局，每行元素间固定间距

Grid 实现

使用 grid 进行实现主要是使用了 grid-template-columns 和 gap 两个属性。

See the Pen grid实现 by Li Yiming (@upupming) on CodePen.

Windows XP 上能安装的 Chrome 的最高版本是 49，根据 caniuse 的数据，Chrome 49 是不支持 grid-template-columns 和 gap 的。这样我们只能另找其他办法来实现，很容易就想到了 grid 的亲兄弟 flex。

Flexbox 实现

用 Flexbox 实现，对于父元素主要用到的是 flex-wrap，容纳不下的时候就换行。对于子元素主要用到的是 flex-basis、flex-grow 两个属性，flex-basis 将基础宽度先定为一个百分比，使得每行只能容纳两个元素，然后再利用 flex-grow 使每行的两个元素均匀地占满一行。

See the Pen flexbox实现 by Li Yiming (@upupming) on CodePen.

注：其实使用 calc 可以明确地规定每个元素的宽度为 calc(50% - 12px)，这样也就不需要使用 flex 属性了。然后每一行第 1 个元素加右 margin，第二个元素加左 margin，也是可以的，但是 calc 这种计算函数个人不是特别倾向于去使用，因为可能会造成 postcss 的 px2rem 失效。