Flex и макет (React Native)

Question

Я хочу расположить элементы между ними с фиксированным размером, но варианты, которые я пробую с Flex, похоже, не позволяют ему работать.

Я пробовал эти 2 варианта:

1

alarmContainer: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderWidth: 1,
    borderColor:'black',
    margin: 5
  },
  alarmText: {
    fontSize: 17,
    margin: 5
  },
  alarmBtnDelete: {
    margin: 5
  },
  alarmBtnEdit: {
    margin: 5
  }

2.

alarmContainer: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor:'black',
    margin: 5
  },
  alarmText: {
    fontSize: 17,
    margin: 5
  },
  alarmBtnDelete: {
    margin: 5
  },
  alarmBtnEdit: {
    margin: 5
  }

Результат, который я получаю с помощью опции 1: Результат, который я получаю с вариантом 2, таков:

Я хочу, чтобы это было как вариант 1, только с небольшим запасом между пунктами. Я добавил поля и отступы в каждый элемент, но, похоже, не работает, они не распространяются.

Answer 1

@dillon.harless нашел решение:

alarmContainer: {
    flex: 0,
    flexDirection: 'row', // main axis
    justifyContent: 'space-around', // main axis
    alignItems: 'center', // cross axis
    borderWidth: 1,
    borderColor:'black',
    margin: 5,
    paddingLeft: '30%',
    paddingRight: '30%'
  }