拿来叭你，flex九宫格

Talk is cheap, show you the code.

首先，我们利用 displat:flex，可以轻松实现以下布局：

  <div class="app">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

.app {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
}

.item {
  border: 1px solid lightpink;
  width: 98px;
}

这要是改了width，我又得算，又得改代码，这谁扛得住，继续想。flex-basis: 33%，有没有可能解放我的计算器，试试

.item {
  border: 1px solid lightpink;
  flex-basis: 33%;
}

有问题，因为border的原因，box里面的content是98px，所以是98/300=32.6667，看看32%

.item {
  border: 1px solid lightpink;
  flex-basis: 32%;
}

问题也很明显，右侧多了一点间隙，那个0.6666666667%丢了鸭，烦人啊

我的老兄弟，大饼说，没办法了

那我不能认输，我继续看flex的属性

大饼说，grow呢，grow，让他们长大，然后就有下面的尝试

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
}

flex-grow: 1，如果有剩余空间，会平分给每个item。

但这一行也不是仨啊，搞个球球。

我粗略的试了一把，把每个的宽度设置成30%试试

.app {
  margin-top: 300px;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
  background: lightgray;
}

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
  flex-basis:30%;
}

watch out!!!

有了有了，回头一想，虽然只是30%，但剩余空间因为grow，都长大了，就撑满了，奶思兄嘚

所以，结论你自己下叭，再见👋