Javascript Flexbox，其中一个框设置了flexBasis，其他框填充剩余空间

下面我有一排flexbox。我试图实现的是：我希望有一行5个框，并且我希望能够使用

flexBasis

（

flexBasis

）设置一些框（不是全部）的特定宽度。下面我将第一个框设置为

flexBox:'content'

或

flexBox:'150px'

（故意的）大小

我正在寻找一种方法，使方框2、3、4、5的大小都相同，并占据其父项的全部空间。

let{flexContainer，flexBox，custom}=StyleSheet.create({
flexContainer：{
背景颜色：“绿色”，
填充：“30px”，
flexDirection:'行'，
},
flexBox：{
填充：“30px”，
flexBasis：“20%”，
背景颜色：“红色”，
边框颜色：“蓝色”，
边框宽度：1
},
自定义：{
flexBasis:“内容”
}
})
类SampleApp扩展组件{
render（）{
返回(
喵
喵喵
喵喵喵喵
喵
喵
)
}
}
//渲染
const rootTag=document.getElementById（'react-root'）；
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；
runApplication（'SampleApp'，{rootTag}）；

---

我相信我偶然发现了一个可能的解决方案

通过将

flexContainer

设置为

justifyContent:“

与

flexBox

flexBasis:“20%”

之间的空间，您可以通过水槽获得我想要的功能，而不是填满所有空间

您可以使用它使元素占据剩余空间。将

flexBox

设置为

flexGrow:1

会将剩余空间平均分配给所有元素

flexBox: {
  padding: '30px',
  flexBasis: '20%',
  backgroundColor: 'red',
  borderColor: 'blue',
  borderWidth: 1,
  flexGrow: 1
}

要使您的

自定义

元素保持原始大小，您需要在其上设置

flexGrow:0

，它们将具有您在

flexBasis

中指定的大小。注意：我用

150px

替换了

content

，因为大多数浏览器不支持

content

（请参阅）

更新的代码笔：

flexBox: {
  padding: '30px',
  flexBasis: '20%',
  backgroundColor: 'red',
  borderColor: 'blue',
  borderWidth: 1,
  flexGrow: 1
}

custom: {
  flexBasis: '150px',
  flexGrow: 0
}