为什么 React Native 不提供 justify-self

Question

我想在主轴上对齐一个项目。例如，我想要一行有几个孩子都左对齐，然后一个孩子在右边对齐。

您可以使用“position: absolute; right: 0”之类的东西来实现这种效果，但我想知道是否有更好的方法。似乎应该有一个 justifySelf 属性，它只影响一个孩子并影响其在主轴上的对齐方式，就像 alignSelf 影响一个孩子在辅助轴上的对齐方式一样轴。

然而，似乎不存在这样的 justifySelf 。为什么是这样？

它类似于这个问题，但又不完全是： How can you float: right in React Native?

原文由 Varun Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不知道 React Native，但我知道 flexbox！

使用以下代码作为指南：

 <div style="display: flex;">

  <div>
    I'll be on the left side
  </div>
  <div>
    I'll be hugging the guy on the left side
  </div>
  <div>
    I'll be hugging the guy hugging the guy on the left side
  </div>
  <div style="margin-left: auto;">
    I'll be hugging the right side far away from those other guys
  </div>

</div>

在最后一个孩子上设置的边距会将所有其他孩子推到左侧，只要它们的样式允许，并将自己推到任何其他样式允许的最右边。

您还可以通过将 margin-right: auto; 添加到最后一个子项来对此进行测试，在前三个子项占据分配的空间之后，您将看到最后一个子项完美地居中于父 div 的剩余空间中。这是因为相互竞争的“保证金汽车”将平分剩余的空间，因为它们不能相互抵消，也不会相互覆盖。

Flex box 旨在处理这样的边距间距，因此请充分利用它，以及 justify-content 属性下可用的其他独特间距选项。

有用的文章： https ://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

原文由 Ben Steward 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我相信你想实现这样的目标：

您可以通过嵌套共享相同 justifyContent 属性的视图来实现这一点。

   <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </View>

原文由 db42 发布，翻译遵循 CC BY-SA 4.0 许可协议