React Native Flexbox — Key points — II

In the previous post on Flexbox, we explored the Alignment properties of Flexbox — Flex, FlexDirection, and JustifyContents.

In This post, we will explore the following

1. alignItems
2. alignSelf
3. flexWrap

alignItems — Defines how to align children along the secondary axis of its container.

Mind it —This property is declared on the parent view and affects its flex children as flexDirection does.

Possible values for alignItems are:

• stretch
• center
• flex-start
• flex-end

stretch is the default alignment.

For example:-

Figure 1. examples to use the non-default alignItems properties: center, flex-start, and flex-end and how they ‘aligned’ affect the children.

Figure 2. Using non-default alignItems properties: center, flex-start, and flex-end

In the above code snippet:-

#A. Changing the alignItems property to center

#B. Changing the alignItems property to flex-start

#C. Changing the alignItems property to flex-end

alignSelf — This property enables us to change the alignment of a child element irrespective of its parent container’s alignment. This property allows a child element to be positioned differently from its siblings.

Mind It — With alignSelf, we can get access to the alignItems property for individual elements within the container. alignSelf gives us the ability to override whatever alignment was set on the parent container, and allows a child object to be aligned independently of its peers. Overriding the parent container’s alignment with alignSelf

Possible value of alignSelf are:

• auto
• stretch
• center
• flex-start
• flex-end

auto is the default value

Get Summit Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The properties stretch, center, flex-start, and flex-endhave the same impact on the layout as their respective properties on alignItems. These properties affect how the items are aligned along the cross-axis of the container.

For Example:

Figure 2. Shows how each of the alignSelf properties affect the layout when their parent container’s alignItems property is set to the default value of stretch.

Figure 3: Using alignSelf to override the parent container’s alignItems property

Figure 4: Using alignSelf to override the parent container’s alignItems property

#A. Setting alignSelf to auto picks up the parent container’s value of stretch.

#B. Setting alignSelf explicitly to stretch.

#C. Set the example’s alignSelf property to center.

#D. Set the example’s alignSelf property to flex-start.

#E. Set the example’s alignSelf property to flex-end.

#F. The default value for alignSelf is auto.

#G. The align property is used to set the Example component’s alignItems style.

flexWrap — Helps to prevent clipping of items, Used in situations in which items flowed off the screen because they didn’t fit.

flexWrap takes two values: nowrap and wrap. The default value is nowrap, meaning that items flow off the screen if they don’t fit. The items are clipped, and the user can’t see them. To work around this problem, we use the wrap value.

Figure 5: An example of two overflowing containers, one with flexWrap set to nowrap and the other with flexWrap set to wrap.

Figure 6: Example of how the flexWrap values nowrap and wrap affect layout

Figure 7: Example of how the flexWrap values nowrap and wrap affect layout

Figure 8: Example of how the flexWrap values nowrap and wrap affect layout

#A. The first example with flexWrap set to nowrap. The squares overflow off the screen.

#B. The second example with flexWrap set to wrap. The row of squares wraps around to start a new line rather than overflowing off the screen.

#C. Using the noWrapContainer style for the first example

#D. Using the wrapContainer style for the second example

#E. The noWrapContainer sets the flexDirection to row and flexWrap to nowrap.

#F. The wrapContainer sets the flexDirection to row and flexWrap to wrap.

Taken from the original blogpost.