每天解决1个问题：flex布局行距被拉大了，如何处理？

问题是这样的，我们业务里，有一个高度是根据配置来的，这也就意味着：内容可能很少，高度很高。比如：内容大概只有300的高度，但父级的高度是800，然后我的样式如下图。

image.png

结果导致了如下效果，测试同事提出了bug。

image.png

这明显不是我们想要的，是有问题的，但是为什么会导致这个问题呢？是margin-bottom设置的有问题么？不是，我设置的是10像素。

那是什么情况呢，有可能是flex布局的问题。

然后，找答案，发现果然，flex有这样一个align-content的属性，默认值是stretch，元素被拉伸以适应容器。

菜鸟教程.png

接着，结合其他属性的值，我想着，应该会有一个start的属性，来不让其拉伸，果然,正是flex-start,当设置这个属性以后，bug解决！

image.png

bug修复后.png

反思，flex好久没有认真用了，之前也没遇到过这种情况，所以导致这块知识点认识不够。这也是之前，对知识总是浅尝辄止所导致，全局观不够。

不过从中也吸取了经验，以后，工作时，持续每天解决一个问题，在此记录。