0

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

4

2 回答 2

0

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

通过设置flexContainertojustifyContent: 'space-between'和 theflexBox flexBasis: '20%'你得到我想要的功能只是用排水沟而不是填满所有的空间。

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

于 2017-02-24T18:42:54.177 回答
0

您可以使用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大多数浏览器不支持（请参阅浏览器兼容性）

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

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

于 2017-02-24T18:56:55.230 回答