フレックスボックスでは、フレックスボックスにフレックスバースを設定し、残りのボックスに残りのスペースを設定します。

Question

以下、フレックスボックスの行があります。私が達成しようとしているのはこれです：私は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

私は、私は可能な解決策につまずいたと信じています。あなただけではなく、すべてのスペースを埋めるよりもどいて私が欲しい機能を取得justifyContent: 'space-between'とflexBoxflexBasis: '20%'にflexContainerを設定することにより

。

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