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

Posted 2023-04-02

参考技术A

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

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

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

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

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

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

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

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

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

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

flex 布局 flex-basis 属性

flex-basis是flex中的 子元素 属性，默认为auto     ！！！此属性优先级大于width！！！

默认auto时, 为子元素设置的width.

当 子元素的width设置为 百分比时，指子元素的width占父容器的width的百分比，当d1 为 50%，d2,d3 为25%时，见下图：

当 d3 为 0%时，为元素内容撑开的宽度，见下图：

除此以外, MDN上还有一些说明，但目前只有firefox支持，略过。