Flexbox where one box has set flexBasis with and the others fill remaining space

Question

Below I have a flexbox row. What I'm trying to achieve is this: I'd like to have a row of 5 boxes and I want to be able to set some of the boxes (not all) specific widths using flexBasis (flex-basis). Below I have set the first box to flexBox: 'content' or flexBox: '150px' (a deliberate) size.

I'm looking for a way for box 2, 3, 4, 5 to all be the same size and take up the full amount of it's parent.

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

score 0 · Answer 1 · answered Feb 24 '17 at 18:42

I believe I stumbled on a possible solution.

By setting the flexContainer to justifyContent: 'space-between' and the flexBox flexBasis: '20%' you get the functionality I want just with gutters rather than filling all the space.

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

score 0 · Answer 2 · answered Feb 24 '17 at 18:56

You can use flex-grow to make the elements take up the remaining space. Setting your flexBox to flexGrow: 1 will distribute the remaining space equally to all elements.

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

To make your custom elements stay the original size, you need to set flexGrow: 0 on them and they will have exactly the size you specify in flexBasis. Note: I replaced content with 150px, because content is not supported by most browsers (see Browser compatibility)

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

The updated codepen: http://codepen.io/anon/pen/MpYKGq?editors=0010

Flexbox where one box has set flexBasis with and the others fill remaining space

2 Answers2