-
问题是这样的，我们业务里，有一个高度是根据配置来的，这也就意味着：内容可能很少，高度很高。比如：内容大概只有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好久没有认真用了，之前也没遇到过这种情况，所以导致这块知识点认识不够。这也是之前，对知识总是浅尝辄止所导致，全局观不够。
不过从中也吸取了经验，以后，工作时，持续每天解决一个问题，在此记录。
每天解决1个问题：flex布局行距被拉大了，如何处理？
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用...
