flex布局的最后一行布局的问题

 可使用flex-grow布局方式解决

1. 容器的属性

• display：flex
• flex-direction: row | row-reverse | column | column-reverse 默认值为row
• flex-wrap: wrap | nowrap | wrap-reverse 默认值为nowrap
• flex-flow: || ; flex-flow 是flex-direction和flex-wrap的简写
• justify-content: flex-start | center | flex-end | space-between | space-around
• align-items: flex-start | center | flex-end | stretch | baseline
• align-content： flex-start | center | flex-end | space-between | space-around

2. 项目的属性

• order 定义项目的排列顺序，数字越小。项目越靠前。默认为0
• flex-grow 定义项目的放大比例。默认为0. 即如果存在剩余空间，也不放大
• flex-shrink 定义项目的缩小比例。默认为1，如果项目空间不够。则缩小此项目
• flex-basis 定义项目占据的主轴空间，浏览器根据此属性。来计算剩余空间。默认为auto。即项目本身所占的空间的大小
• flex : none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• align-self: auto | flex-start | center | flex-end | stretch | baseline 默认为auto。align-self可以允许项目有自己的对齐方式。覆盖容器的align-items属性。

<div class="box">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
  <div>55</div>
  <div>66</div>
  <div>77</div>
  <div>88</div>
  <div>99</div>
  <div>1010</div>
  <div>1010</div>
  <div>1010</div>
  <div>1010</div>
  <div>1010</div>
  <div>1010</div>
  <div>1010</div>
</div>

.box{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 90px;
  grid-gap: 20px;
}
.box > div{
  
  text-align: center;
  border: 1px solid red;
}