Flexbox布局问题咨询：图片未被识别为弹性项等疑问

嘿，我来帮你拆解这两个Flexbox使用中遇到的问题，都是日常开发里很容易碰到的细节坑～

问题1：为何图片未被当作Flexbox项目处理？ #

从你给出的代码片段来看，.categories-area是设置了display: flex的容器，但只有flex容器的直接子元素才会被识别为flex项目。结合你的代码结构分析，大概率是这两种情况：

• 图片是.category元素的子元素，而非.categories-area的直接子元素——此时.category才是.categories-area的flex项目，图片属于.category的内部元素，自然不会被外层的flex容器处理。
• 图片被设置了position: absolute——绝对定位的元素会脱离正常文档流，flex容器不会将这类元素纳入flex项目的管理范围（哪怕它是直接子元素）。你给.category加了position: relative，如果内部图片用了绝对定位，就会跳出flex布局的控制。

解决思路： #

如果想让图片成为flex项目，要么把它直接放在.categories-area下作为直接子元素；要么把.category也设置为display: flex，让图片成为.category这个子flex容器的项目，这样就能用Flexbox属性控制图片了。

问题2：右侧处于另一个Flexbox中的文本元素为何会撑满其父div的高度？ #

这个是Flexbox的默认行为导致的：
当一个元素是flex容器的子元素时，默认的align-self属性值是stretch——意思是在flex容器的交叉轴（这里因为.categories-area是横向flex，交叉轴为纵向）方向上，子元素会自动拉伸以填满容器的高度。

你的.categories-area设置了固定高度height: 218px，右侧的另一个flex容器作为它的子项目，会默认继承这个高度（因为align-self: stretch）；而这个子flex容器内部的文本元素，又会因为自身所在的flex容器默认align-items: stretch的属性，被拉伸至填满父容器的高度。

解决思路： #

如果不想文本撑满父div高度，有几种简单的调整方式：

• 给文本元素单独设置align-self: flex-start；
• 给文本所在的flex容器设置align-items: flex-start，统一控制容器内所有子元素的对齐方式；
• 给父div设置固定的最小/最大高度，或者显式修改flex容器的拉伸行为。

内容的提问来源于stack exchange，提问作者JustIlom