Flexbox，其中一个盒子设置了 flexBasis，其他盒子填充剩余空间答案

【问题标题】：Flexbox where one box has set flexBasis with and the others fill remaining spaceFlexbox，其中一个盒子设置了 flexBasis，其他盒子填充剩余空间
【发布时间】：2017-02-24 17:19:31
【问题描述】：

下面我有一个 flexbox 行。我想要实现的是：我想要一排 5 个框，并且我希望能够使用 flexBasis (flex-basis) 设置一些框（不是全部）特定宽度。下面我将第一个框设置为flexBox: 'content' 或flexBox: '150px'（故意）大小。

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

let {flexContainer, flexBox, custom} = StyleSheet.create({
  flexContainer: {
    backgroundColor: 'green',
    padding: '30px',
    flexDirection: 'row',
  },
  flexBox: {
    padding: '30px',
    flexBasis: '20%',
    backgroundColor: 'red',
    borderColor: 'blue',
    borderWidth: 1
  },
  custom: {
    flexBasis: 'content'
  }
})

class SampleApp extends Component {
  render() {
    return (
      <View style={flexContainer}>
        <View style={[flexBox, custom]}>
          meow
        </View>
        <View style={flexBox}>
          meowmeow
        </View>
        <View style={flexBox}>
          meowmeowmeow
        </View>
        <View style={flexBox}>
          meow
        </View>
        <View style={flexBox}>
          meow
        </View>
      </View>
    )
  }
}


// rendering
const rootTag = document.getElementById('react-root');
AppRegistry.registerComponent('SampleApp', () => SampleApp);
AppRegistry.runApplication('SampleApp', { rootTag });

http://codepen.io/reggi/pen/xqbZav?editors=0010

【问题讨论】：

标签： javascript reactjs react-native react-native-web

【解决方案1】：

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

通过将flexContainer 设置为justifyContent: 'space-between' 和flexBox flexBasis: '20%'，您可以获得我想要的功能，只需使用排水沟而不是填充所有空间。

http://codepen.io/reggi/pen/jBEPXg?editors=0010

【讨论】：

【解决方案2】：

您可以使用flex-grow 使元素占用剩余空间。将flexBox 设置为flexGrow: 1 会将剩余空间平均分配给所有元素。

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

要使您的custom 元素保持原始大小，您需要在它们上设置flexGrow: 0，它们将具有您在flexBasis 中指定的大小。 注意：我将content 替换为150px，因为大多数浏览器不支持content（参见Browser compatibility）

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

更新的codepen：http://codepen.io/anon/pen/MpYKGq?editors=0010

【讨论】：