包裹孩子后，使flex容器调整宽度到它的孩子而不是它的父母[重复]答案

【问题标题】：Make flex container adjust width to its children instead of its parent after children are wrapped [duplicate]包裹孩子后，使flex容器调整宽度到它的孩子而不是它的父母[重复]
【发布时间】：2021-07-07 17:37:15
【问题描述】：

我有一个带有两个子元素的 flex 容器，当我的屏幕变小时需要包装它们。问题是我希望我的 flex 容器不断调整其宽度以适应内容，即内部的子元素而不是父元素。我尝试使用display: inline-flex，当孩子排成一行时它可以工作，不幸的是，当他们被包裹起来时它就停止工作了。

如何在使用flex-wrap: wrap 属性时实现弹性容器调整到其内容？

Codepen

【问题讨论】：

好问题！你能分享相关的CSS和HTML代码吗？我怀疑它会帮助贡献者找到适合你的解决方案。

标签： css flexbox width

【解决方案1】：

.....
<View 
style={{flex:1,flexDirection:'row',flex-wrap:'wrap',justifyContent:'space-between'}}>
      <View style={{width:'30%'}}>
         <Text>Text1</Text>
      </View>
      <View style={{width:'30%'}}>
         <Text>Text2</Text>
      </View> 
      <View style={{width:'30%'}}>
         <Text>Text3</Text>
      </View>
      <View style={{width:'30%'}}>
         <Text>Text4</Text>
      </View>
</View>
.....

【讨论】：