背景

还记得在以前开发小程序的时候遇到过一个样式布局问题，就是需要在一个盒子里面布局1-9个小卡片来放照片，卡片的宽高都是固定的，父盒子的宽度铺满，高度是自动。当时我是我想都不想直接flex一把嗦，想着直接搞定，但是布局效果显然在不满足9个的时候就会布局奇怪

  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;

这样的布局肯定是不满足我的期望的

直接上grid

display: grid; 
grid-template-columns: repeat(auto-fill, 240px); 
justify-content: space-between; 
grid-row-gap: 20px; 
grid-column-gap: 20px;

现在基本上就满足布局的要求了

兼容

其实基本都还行，除了被抛弃那个浏览器0.0

css处理

  $width: 100%;
  $count: 3;
  $cellWidth: 100px;
  $margin-auto: calc((100% -  #{$count} * #{$cellWidth})/(#{$count} * 2));

.container {
  box-sizing: border-box;
  width: 375px;
  height: auto;
  background: #000;
  padding:  10px 10px;
  .fake-img {
    display:inline-block;
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px $margin-auto;
  }
}

看起来是有点麻烦，基本思路就是计算盒子两边边距宽度来实现布局，维护基本难度也不大；还顺便学习了预处理器的语法，泰裤辣。

flex重回原点

我总是以为flex解决不了我需要的布局问题，后面f12打开b站，看看人家是怎么布局的，没想到人家就是flex布局也可以完美的处理这个布局的问题，原来是我学艺不精,还是得多学多练，学无止境。

flex:0 0 33.3333%

这行代码的意思就是

flex: 0 0 33.33% 是 CSS 中用于设置弹性盒子（flexbox）项目的样式属性之一。

这个属性值由三个部分组成，分别对应于 flex-grow、flex-shrink 和 flex-basis。

• flex-grow：决定弹性盒子项目在剩余空间中的增长比例。在这个例子中，0 表示项目不会在剩余空间中增长。
• flex-shrink：决定弹性盒子项目在空间不足时的收缩比例。在这个例子中，0 表示项目不会收缩。
• flex-basis：定义弹性盒子项目的初始大小。在这个例子中，33.33% 表示项目的初始大小为占据父容器的宽度的 33.33%。

综合起来，flex: 0 0 33.33% 表示弹性盒子项目不会增长或收缩，并且初始大小为父容器宽度的 33.33%。这样设置可以使项目在弹性布局中占据固定的空间，并且不会自动调整大小。[GPT真好用]