Question

下面我有一个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

Answer 1

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

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

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

Answer 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
}

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

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

2 个答案: