Flex 和布局（React Native）答案

【问题标题】：Flex and layout (React Native)Flex 和布局（React Native）
【发布时间】：2019-09-20 07:48:51
【问题描述】：

我想在它们之间以固定大小间隔项目，但我尝试使用 Flex 的选项似乎无法使其工作。

我尝试了这两个选项：

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
  }

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 一样，只是在项目之间留有一点边距。我在每个项目中添加了边距和填充，但似乎不起作用，它们没有扩散。

【问题讨论】：

也许我对 react 的了解不够，但是你试过在你的 margin: 5 后面加上 '%' 或 'px' 吗？
是的，它什么都不做，没有变化。
对，我刚刚看到您正在使用 justify-content。将其设置为 flex-start 怎么样？ center 会将它们全部放在中心，而 space-around 将在 flex 父级中包含的所有项目周围放置相等的空间。
我现在必须离开，但尝试将其设置为 flex-start 并将 padding-left 添加到包含所有这些项目的父级，如果这不起作用，则尝试将 justify-content 设置为space-around 并仅在包含所有这些项目的父级上设置 padding-left 和 padding-right。
将其设置为环绕空间并在 30% 处添加 paddingLeft 和 paddingRight 就可以了！非常感谢:)

标签： css react-native layout flexbox

【解决方案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%'
  }

【讨论】：