关于flex和grid布局的一些随笔

最近在做一个卡片列表的需求，类似于如下这种：

一开始想着用flex，于是设定好了每个卡片的宽度，使每行最多只能容下8个卡片。

其他的样式如下：

//容器
justify-content: space-around;
align-items: flex-start

//项目
flex: 0 1 auto;

为了记住这两个属性的含义，特意查了下注释：

justify其实是印刷学中的术语，表示是否对称排布或者留出空间。这样可以记为在主轴上是如何排布内容的。

align的含义其实是把内容排列成一条直线，如果只有一行，就是align-items属性生效。如果有多行，就是align-content生效。定义flex的内容在交叉轴上如何排布。

第一页样式没什么问题，但是第二页却成了这样：

所以还是得尝试一下二维的grid布局，容器设置样式如下：

display: grid;
grid-template-columns: repeat(6, 16.6%);

第二页就正常了：

所以关于flex和grid布局的选择，如果是这种卡片列表，只想通过布局来使卡片之间的间隙平均分布。可以选择grid布局，如果是要写一个横向排列的或者成块分布的内容，就可以使用flex。