flex使用遇到的问题

image.png

这算是一个很常见的布局，现在我们用flex布局来实现就遇到了上面这种莫名其妙，中间有一段地方是留空的。

中间找了很多flex的相关知识点，最后在看flex相关介绍的时候找到问题所在。

问题出现原因：flex 意为 弹性伸缩盒子 左边side 设置了高度 右边 wrapper会等高 然而右边他的盒子是多行的，当他多行盒子高度加起来的高度不等于或者超过wrapper的高度时 他就会自己去拉伸子元素的高度，也就是
align-content：stretch 这个属性 默认值。元素被拉伸以适应容器。
如果我们想让盒子实现下图这样排下去的结果

image.png

解决方法：aalign-content：flex-start 元素都会排列到元素的开头 也就是如效果一样一行一行排下去