javascript - 为什么 React Native 不提供 self 辩护

Question

我想在主轴上对齐一个项目。例如，我想要一行中的几个子项全部向左对齐，然后一个子项在右侧对齐。

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

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

这与这个问题类似但不完全是:How can you float: right in React Native?

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 的剩余空间中三个 child 占据了他们分配的空间。这是因为竞争的“ margin 自动”将平等共享剩余的空间，因为它们不能相互抵消，也不会相互覆盖。

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

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