怎样让孩子把自己的宽度包起来？答案

【问题标题】：How to make children wrap their own width?怎样让孩子把自己的宽度包起来？
【发布时间】：2021-09-13 23:38:30
【问题描述】：

我希望我的孩子看起来像这样

不是这样的

这是我的代码

//我使用地图来创建孩子列表，由于某些目的我不使用平面列表或其他列表

<Portal>
    <Modal visible={visibleModal} onDismiss={hideModal} style={styles.modalFilter} contentContainerStyle={styles.contentModalFilter}>
         {genres.map(genre => <Chip key={genre} onPress={() => console.log('Pressed')}>{genre}</Chip>)}
     </Modal>
</Portal>

//css

const styles = StyleSheet.create({
 modalFilter: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
 },
 contentModalFilter: {
    backgroundColor: 'white',
    width: '100%',
    height: '100%',
    padding: 20,
    borderRadius: 15,
 },
});

【问题讨论】：

display: flex 在父级上带有flex-wrap: wrap，然后在子级上计算 最小宽度以及填充和/或间隙取决于你想有多少项目适合父母的宽度，比如； min-width: calc(33% - padding)，然后添加 flex-basis 1 flex-basis: 1。

标签： css react-native layout flexbox

【解决方案1】：

const styles = StyleSheet.create({
 modalFilter: {
    display: flex;
    flexWrap: wrap;
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
 },
 contentModalFilter: {
    backgroundColor: 'white',
    width: calc(33% - 40),
    height: '100%',
    padding: 20,
    borderRadius: 15,
 },
});

【讨论】：