如何使用 react-native 和 align 让 flex 元素缩小到它们的内容？答案

【问题标题】：How can I have flex elements shrink to their contents with react-native and align?如何使用 react-native 和 align 让 flex 元素缩小到它们的内容？
【发布时间】：2020-05-01 14:20:34
【问题描述】：

我有：

        <StyledSurface style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            {conversations.map((c, i) => (
                <Surface style={{ backgroundColor: 'red', width: '46%', margin: '2%', flexDirection: 'column', flexShrink: 1, alignSelf: 'flex-start'}} key={i}>
                    <Text style={{flex: 1}}>{c.title}</Text>
                </Surface>
            ))}
        </StyledSurface>

这最终看起来像：

但我希望每个红色框（垂直）收缩以适应内容并具有相等的间距？

我错过了什么？

【问题讨论】：

我想你想要alignContent: 'flex-start'
stackoverflow.com/q/34480760/3597276

标签： css react-native flexbox react-flexbox-grid

【解决方案1】：

在 View 容器上添加：

alignSelf: 'flex-start',

应该做的伎俩

【讨论】：

更接近 - 但我更新了问题以反映我的更新