[CSS] flexbox 布局中，让其元素均匀排列且如何均匀元素之间的 column-gao 和 row-gap 的计算公式

要达到上图效果，可以通过 margin，但是每一行首元素和尾元素都要单独处理，通过 nth-child 选择器设置。

也可以让每一个元素宽度都是父元素宽度的 25%，然后子元素宽度再一点点调试向下减一点点，比如 22% 合适，并且需要设置 justify-content: space-between 或者其他，但如果最后一行元素不满4个，根据实际场景也达不到最佳效果。

因此，通过我自己调试总结的规律得出的一条公式：

设一行 n 个子元素，子元素的宽度为 w%，column-gap 为 (100% - n * w%) / (n - 1)，row-gap 为 column-gap / 2，其中，column-gap 和 row-gap 的结果都向下取整。

如图1，我需要一行 4 个子元素，我设计子元素宽度 22%，那么 column-gap 就是 (100% - 4 * 22%) / 3 = 4%，row-gap 就是 4% / 2 = 2%。

.flexbox {
  width: 22%;
  height: 150px;
}

.container {
  width: 500px;
  height: 1000px;
  border: 1px solid red;
  /* flex */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  /* flex */

  /* flex-gap */
  column-gap: 4%;
  row-gap: 2%;
  /* flex-gap */
}