Germinate's Blog

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

发表于 | | 阅读量 次

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

问题描述

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

  • 默认情况的布局代码：
    1
    2
    3
    4
    <View style={{ flexDirection: 'column', flex: 1, backgroundColor: 'blue' }}>
      <View style={{ backgroundColor: 'yellow', flex: 1 }} />
      <View style={{ backgroundColor: 'red', flex: 1 }} />
    </View>

正常情况

  • 父容器设置alignItem: center , 子元素不显示
    1
    2
    3
    4
    <View style={{ alignItems: 'center', flexDirection: 'column', flex: 1, backgroundColor: 'blue' }}>
      <View style={{ backgroundColor: 'yellow', flex: 1 }} />
      <View style={{ backgroundColor: 'red', flex: 1 }} />
    </View>

子元素不显示

  • 子元素必须要指定宽度，或者元素内部有撑起容器的内容，才能显示。
    1
    2
    3
    4
    5
    6
    <View style={{ alignItems: 'center', flexDirection: 'column', flex: 1, backgroundColor: 'blue' }}>
      <View style={{ width: 100, backgroundColor: 'yellow', flex: 1 }} />
      <View style={{ backgroundColor: 'red', flex: 1 }}>
        <Text>Hello World!</Text>
      </View>
    </View>

子元素有宽度

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

问题探究

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

The align-items property vertically aligns the flexible container’s items when the items do not use all available space on the cross-axis.

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

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

1
2
3
4
<View style={{ alignItems: 'center', flexDirection: 'column', flex: 1, backgroundColor: 'blue' }}>
  <View style={{ width: 100, backgroundColor: 'yellow', flex: 1 }} />
  <View style={{ backgroundColor: 'red', flex: 1 }} />
</View>

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

总结

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

  1. 不能只关注效果，忽略了场景。因为弹性盒模型上手非常容易， alignItem属性描述又通俗易懂——元素在交叉轴方向上的对齐方式。所以就忽略了使用这个属性的具体场景。对于技术的使用，效果很重要，但适用的场景也必须清楚才行。 （仔细想想自己有点傻，当然是不使用交叉轴所有空间时，对齐方式才有意义，都占满了还指定对齐方式干嘛？）
  2. 一筹莫展时先去看看官方文档。学习新技术时，优秀的博客或教程有时比官方文档更易上手，所以我们往往忽略了官方文档。即使去阅读了，作为一个经验不足的初学者，文档的一些内容不是很理解，或者在阅读过程中忽略了看似没用但实则重要的说明。当有了一定经验，碰到棘手的问题时，再去看官方文档，可能有新的理解，问题便迎刃而解。