css中flex布局导致容器中图片被压缩问题

Posted 2023-04-02

参考技术A 图中：头像、“账号名称”，“具体名称内容”是一个容器内的三部分，给容器设置`display:flex`，时，如果“具体名称内容”字数过多，出现换行，会导致图片宽度被压缩，页面成为如下样子：

为了防止图片被压缩，可以给图片容器设置`flex-shrink: 0;`，只有不为0的元素才会被压缩。

flex布局时，设置alignItem属性导致元素不显示的问题探究

参考技术A

最近在使用react native的过程中，遇到一个问题。父子元素均使用flex布局，子元素按设置的比例“分享”父元素的空间，显示效果符合预期。但如果父元素设置了 alignItem: center ，子元素就不再显示（在子元素使用 alignSelf: center 亦是如此）。下面用一个简单的例子直观地描述问题。

布局很简单，蓝色父容器占满屏，黄色、红色两个子元素上下排列，分享父容器空间。

这个问题困扰了我很久，按我原先的理解，元素设置了flex: 1，就应该占满剩余空间，但结果却和预想的不一样。最终在 这里 找到了答案。

让我豁然开朗的就是w3schools中的一句话：

根本原因是从句的内容，当子元素不需要使用交叉轴的所有空间时，才应该设置这个属性。
该属性默认的是 stretch ，填充交叉轴的全部长度。如果设置其他属性，例如center，就需要显式地指定元素在交叉轴方向上的大小，或者有内容，否则元素就不会显示。

此处还纠正了我一个错误的认识。设置flex属性时，并不是弹性填满元素剩余的可用空间，仅仅是在 主轴 方向分配 剩余空间 ，至于显示大小，还要靠交叉轴的配合。举个例子：

给上方元素指定宽度，下方元素没有宽度和内容。显示效果如下图：

可以看到，虽然下方元素没有显示，但在主轴方向上还是占据了一半空间（设置了flex:1 属性）。所以主轴的剩余空间还是按比例分配了，只是交叉轴长度为0，导致下方元素不显示。

虽然是针对React Native的探究，但经过我的简单测试，网页上的flex布局也遵循这个原理。
这次学习的过程，让我有两个很深刻的体会。

原 博文 发布在个人博客，欢迎访问！！