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 не поддерживается большинством браузеров (см. Совместимость браузера)

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

Обновленная кодовая ручка: http://codepen.io/anon/pen/MpYKGq?editors=0010