flex布局的九宫格如何避免窗口缩小造成的盒子变形

在使用flex布局实现九宫格时，可以通过设置盒子的最小宽度和最小高度来避免在窗口缩小时造成的盒子变形。具体来说，可以使用`min-width`和`min-height`属性来设置盒子的最小宽度和最小高度，例如设置为每个盒子宽度和高度均为100px时，可以添加如下样式：

.box {
  display: flex;
  flex-wrap: wrap;
}

.box div {
  flex: 1 0 33.33%;
  min-width: 100px;
  min-height: 100px;
}

这样，在窗口缩小时，当盒子的大小小于最小宽度和最小高度时，盒子的宽度和高度就不会继续缩小，从而避免了盒子变形的问题。