React Native 中的 alignItems 和 alignSelf 有啥区别？

Posted 2023-03-06

【中文标题】React Native 中的 alignItems 和 alignSelf 有啥区别？

【英文标题】：What's the difference between alignItems and alignSelf in React Native?React Native 中的 alignItems 和 alignSelf 有什么区别？

【发布时间】：2016-08-03 08:03:22

【问题描述】：

我试图了解 React Native 上的 FlexBox 实现，但很遗憾Facebook's documentation 根本没有提供任何关于各个属性含义的信息。他们只列出了他们已经实现的那些，没有进一步的文档......

我喜欢Flexbox in 5 教程，它在解释最重要的 FlexBox 属性方面做得非常出色。但是，那里没有提到 alignSelf 属性，我也没有在其他地方找到有关此属性的文档...

有人可以解释（甚至可以直观地展示）两者之间的区别是什么吗？我还感谢任何资源的链接，这些资源可以更详细地解释 React Native FlexBox 属性并提供一些使用它们的指导。

【问题讨论】：

align-self 和 align-items 不是反应属性。它们是 flexbox 下的原生​​ CSS 属性的一部分。 React native 只是为你提供了一个 js/dom api 来访问这些。

align-items - developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-self - developer.mozilla.org/en-US/docs/Web/CSS/align-self

【参考方案1】：

alignItems 和 alignSelf 本身具有相同的功能。唯一的区别是，alignItems 将对齐应用于它的孩子，而alignSelf 将对齐应用于自身。当您想要更改一个孩子的对齐方式时，这很有用。

这是来自https://css-tricks.com/snippets/css/a-guide-to-flexbox/的插图

当容器具有样式alignItems:'flex-start'时会发生上述情况

当容器的样式为 alignItems:'flex-start' 而第三个子容器的样式为 alignSelf:'flex-end 时会发生这种情况

【参考方案2】：

alignSelf 可以覆盖特定项目的 alignItems 值。