Flex, short for Flexible Box, is used in RN to describe the alignment and relative placement of child components in parent components, enabling them to adapt to different screens and bring greater flexibility to interface layout.

The Flex layout consists of a Flex Container and a Flex Item. Flex Containers are divided into main axis and across Axis. The main axis is vertical by default.

flex

Flex is an elastic container property. In CSS3, flex-grow, flex-shrink, and flex-basis are combined. The latter two are optional parameters. Flex defaults to the flexGrow property in RN.

  • The flexGrow element spindle size relative to the current container spindle size. The default value is 0.

flexDirection

The flexDirection attribute is the main axis direction. The value can be column, column-reverse, row, or row-reverse. The default value is column.

  • Column is vertical, starting at the top, and the child components are arranged from top to bottom.
  • Column-reverse vertical, starting at the bottom, with child components arranged from bottom to top.
  • Row is horizontal, the starting point is on the left, and the child components are arranged left to right.
  • Row-reverse is horizontal with the starting point on the right and the child components arranged from right to left.

flexWrap

FlexWrap indicates whether a line break is needed if it cannot fit along the main axis. The value can be wrap or nowrap. The default value is wrap.

  • Wrap should not fit in the main axis direction.
  • Nowrap does not fit the main axis without newlines.
FlexWrap (‘ flexDirection: ‘row’)

justifyContent

Content-content represents the spindle alignment of child components in the container. The values are Flex-start, Flex-end, Center, space-between, or space-around. The default value is Flex-start.

  • Flex-start is aligned with the starting point of the spindle in the spindle direction.
  • Flex-end is aligned with the end of the main axis.
  • Center is centered along the main axis.
  • Space-between is aligned on both ends of the main axis, and each item is equally spaced. There is no interval between the first item and the starting point of the main axis, and the last item and the end point of the main axis.
  • Space-around aligns evenly along the main axis, with the same spacing on both sides of each item. The distance between the start and end of the spindle and the two adjacent items is only half the distance between the intermediate items.
Content-content Attribute Value comparison diagram (with ‘flexDirection:’ Row ‘)

alignItems

AlignItems indicates the alignment of neutron components in the cross axis of a container. The value can be flex-start, flex-end, center, stretch, or baseline. The default value is flex-start.

  • Flex-start aligns with the starting point of the cross axis in the direction of the cross axis.
  • Flex-end is aligned with the end of the cross axis in the direction of the cross axis.
  • Center is centered and aligned in the direction of the cross axis.
  • Stretch If the child component is not set to the cross axis size or is set to Auto, it will fill the entire container in the cross axis direction.
  • Baseline is aligned with the baseline of the child component’s first line text.
AlignItems property value comparison graph (where ‘flexDirection: ‘row’)

alignContent

AlignContent defines the alignment of cross axes when multiple axes are aligned. This property has no effect if there is only one axis. The value can be flex-start, flex-end, center, space-between, space-around, or stretch. The default value is flex-start.

  • Flex-start aligns with the starting point of the cross axis in the direction of the cross axis.
  • Flex-end is aligned with the end of the cross axis in the direction of the cross axis.
  • Center is centered and aligned in the direction of the cross axis.
  • Space-between is aligned with both ends of the crossing axis, and the spacing between the axes is equal. There is no interval between item on the first axis and the starting point of the crossing axis, and item on the last axis and the end point of the crossing axis.
  • The spacing between the axes is equal. The spacing between the item on the first axis and the starting point of the crossing axis and the item on the last axis and the end point of the crossing axis is only half of the spacing between the item on the middle axis.
  • Stretch If the child component is not set to the cross axis size or is set to Auto, it will fill the entire container in the cross axis direction.
AlignContent property value comparison graph (where ‘flexDirection: ‘row’)

alignSelf

AlignSelf defines the child component’s own alignment, which overrides the parent component’s alignItems property. The value can be auto, flex-start, flex-end, center, stretch. The default value is auto.

  • Auto inherits its parent component’s alignItems property, or if it does notstretch.
  • The Flex-start child is aligned with the cross axis starting point in the cross axis direction.
  • The Flex-end child is aligned with the cross axis endpoint in the cross axis direction.
  • The Center child is centered and aligned in the cross axis direction.
  • Stretch if not set to size in the cross direction, it will stretch to fill the entire container in the cross direction.
AlignSelf property value comparison diagram (where parent component ‘flexDirection:’ Row ‘)