为何设置alignItems: 'center'会压缩FlatList中卡片的宽度？

在用React Native开发应用时，想让FlatList中的卡片居中展示，但设置contentContainerStyle={{alignItems: "center"}}后，卡片宽度被压缩到极小（约1rem）。为调试给所有元素加了彩色边框，出现两种情况：

• 未设置居中时，卡片尺寸正常，但不居中；
• 设置居中后，卡片居中显示，但宽度几乎消失。

使用Tailwind做样式开发，因contentContainerStyle无法直接使用Tailwind样式，故用常规CSS设置居中。

卡片代码 #

<View className={'my-2 w-5/6 h-36'}>
    <View className={'w-full h-full bg-white rounded-2xl p-2 shadow-md border-2 border-green-400'}>
    </View>
</View>

FlatList代码 #

<FlatList
  renderItem={() => <Card/>}
  contentContainerStyle={{alignItems: "center"}}
  className={'border-2 border-red-400 h-full w-full'}/>

已尝试的解决方法 #

• 将卡片外层View的宽度设为w-max或w-full，卡片仍仅占中间极小区域；
• 给卡片添加flex-1或flex-grow，宽度无变化，但卡片间间隙消失；
• 将FlatList宽度改为w-fit，其宽度会变得和卡片一样窄；移除居中设置后，列表和卡片仍呈窄条状态，设置卡片最小宽度也无效。

问题根源：当给FlatList的contentContainerStyle设置alignItems: 'center'时，contentContainer会变成flex容器，flex容器中子元素默认会收缩到内容宽度。同时React Native的View在flex容器下，百分比宽度需要依赖父容器有明确的宽度约束，此时contentContainer宽度未明确，导致卡片的w-5/6无法正确计算。

你可以用以下两种方法解决：

方法一：给contentContainer设置100%宽度 #

修改FlatList的contentContainerStyle，添加width: '100%'，让内容容器占满整个FlatList宽度，卡片的百分比宽度就能基于屏幕宽度计算：

<FlatList
  renderItem={() => <Card/>}
  contentContainerStyle={{alignItems: "center", width: '100%'}}
  className={'border-2 border-red-400 h-full w-full'}/>

方法二：用margin实现卡片居中（无需修改contentContainer） #

去掉FlatList的alignItems: "center"设置，给卡片外层View添加mx-auto（左右自动margin），让卡片自身居中：

<View className={'my-2 w-5/6 h-36 mx-auto'}>
    <View className={'w-full h-full bg-white rounded-2xl p-2 shadow-md border-2 border-green-400'}>
    </View>
</View>

这两种方法都能保证卡片正常显示宽度的同时实现居中，推荐第二种，更符合Tailwind的样式写法习惯。

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