-
问题是这样的，我们业务里，有一个高度是根据配置来的，这也就意味着：内容可能很少，高度很高。比如：内容大概只有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好久没有认真用了，之前也没遇到过这种情况，所以导致这块知识点认识不够。这也是之前，对知识总是浅尝辄止所导致，全局观不够。
-
不过从中也吸取了经验，以后，工作时，持续每天解决一个问题，在此记录。
网友评论