Flexbox，其中一個箱子設置了flexBasis並且其他箱子填充剩餘空間

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'和flexBoxflexBasis: '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 
} 

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