What's the difference between alignItems and alignSelf in React Native?

Question

I am trying to understand the FlexBox implementation on React Native and find it very unfortunate that Facebook's documentation doesn't provide any info at all on what the individual properties mean. They only name the ones that they have implemented without further documentation...

I love the Flexbox in 5 tutorial, it does an amazing job in explaining the most important FlexBox properties. However, there is no mention of the alignSelf property there and I also didn't find documentation about this one elsewhere...

Can someone explain (maybe even demonstrate visually) what the difference between the two is? I also appreciate links to any resources that explain the React Native FlexBox properties in more detail and provide some guidance in using them.

Answer 1

alignItems and alignSelf have the same functionality per se. The only difference being, alignItems applies the alignment on to it's children while alignSelf applies the alignment to itself. This is useful when you want to change the alignment of one child.

Here is an illustration from https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The above happens when the container has a style alignItems:'flex-start'

This happens when the container has the style alignItems:'flex-start' and the third child has the style alignSelf:'flex-end

Answer 2

alignSelf can override the alignItems value for specific items.