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. 一筹莫展时先去看看官方文档。学习新技术时,优秀的博客或教程有时比官方文档更易上手,所以我们往往忽略了官方文档。即使去阅读了,作为一个经验不足的初学者,文档的一些内容不是很理解,或者在阅读过程中忽略了看似没用但实则重要的说明。当有了一定经验,碰到棘手的问题时,再去看官方文档,可能有新的理解,问题便迎刃而解。