React Native Flexbox layout (Summary) and reactflexbox

React Native Flexbox layout (Summary) and reactflexbox

Flex is the abbreviation of Flexible Box, meaning "elastic layout", used to provide maximum flexibility for the Box model.

Basic Concepts

Elements in a Flex layout are called Flex containers ". All its child elements automatically become container members, known as Flex items ".

By default, the container has two axes: the horizontal axis and the vertical cross axis ). The starting position (intersection with the border) of the spindle is called main start, and the ending position is called main end. The starting position of the cross axis is called cross start, and the ending position is called cross end.

Projects are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container attributes

The following six attributes are set on the container.

1. Flex-direction
2. Flex-wrap
3. Flex-flow
4. Justify-content
5. Align-items
6. Align-content

Flex-direction attributes

The flex-direction attribute determines the direction of the spindle (that is, the direction of the project ).

 { flex-direction: row | row-reverse | column | column-reverse;}

It has four values.

1. Row (default): the spindle is horizontal and the start point is at the left end.
2. Row-reverse: the spindle is in the horizontal direction and the start point is in the right side.
3. Column: the spindle is vertical, and the start point is in the upper direction.
4. Column-reverse

Flex-wrap attributes

By default, projects are arranged on a line (also known as "axis. The flex-wrap attribute definition defines how to wrap a line if an axis does not fit.

{ flex-wrap: nowrap | wrap | wrap-reverse;}

It has three values.

1) nowrap (default): Do not wrap.

2) wrap: line feed. The first line is above.

3) wrap-reverse: line feed. The first line is below.

Flex-flow

The flex-flow attribute is short for the flex-ction attribute and the flex-wrap attribute. The default value is row nowrap.

{ flex-flow: <flex-direction> || <flex-wrap>;}

Justify-content Attributes

The justify-content attribute defines the alignment of the project on the main axis.

It has five values. The alignment is related to the direction of the axis. Assume that the spindle is left to right.

1. Flex-start (default): left aligned
2. Flex-end: right alignment
3. Center: center
4. Space-between: the two ends are aligned, and the interval between projects is equal.
5. Space-around: the intervals between two sides of each project are equal. Therefore, the interval between projects is twice the interval between projects and borders.

Align-items attributes

The align-items attribute defines how the project is aligned on the cross axis.

{ align-items: flex-start | flex-end | center | baseline | stretch;}

It has 5 values. The specific alignment mode is related to the direction of the cross axis. The following assumes that the cross axis is from top to bottom.

1. Flex-start: the starting point of the cross axis.
2. Flex-end: end Point alignment of the cross axis
3. Center: midpoint alignment of the cross axis
4. Baseline: baseline alignment of the first line of text of the project
5. Stretch (default): if the project is not set to height or set to auto, the height of the entire container is fully occupied.

Align-content Attributes

The align-content attribute defines the alignment of Multiple Axes. This attribute does not work if the project has only one axis.

{ align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

This attribute has 6 values.

1. Flex-start: align with the starting point of the cross axis
2. Flex-end: aligned with the end of the cross axis
3. Center: align with the midpoint of the cross axis
4. Space-between: alignment with the two ends of the cross axis. The gap between the two ends is evenly distributed.
5. Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between axes is twice the interval between axes and borders.
6. Stretch (default): The axis occupies the whole cross axis

Project Properties

The following six attributes are set on the project.

1. Order
2. Flex-grow
3. Flex-shrink
4. Flex-basis
5. Flex
6. Align-self

Order attribute

The order attribute defines the order of projects. The smaller the value, the higher the order is. The default value is 0.

{ order: <integer>;}

Flex-grow attributes

The flex-grow attribute defines the scale-in ratio of the project. The default value is 0. That is, if there is any space available, it is not enlarged.

{ flex-grow: <number>; /* default 0 */}

If the flex-grow attribute of all projects is 1, they are evenly divided into the remaining space (if any ). If the flex-grow attribute of a project is 2 and that of other projects is 1, the former occupies twice the remaining space.

Flex-shrink attributes

The flex-shrink attribute defines the project scale-down. The default value is 1. If the space is insufficient, the project scale-down.

{ flex-shrink: <number>; /* default 1 */}

If the flex-shrink attribute of all projects is 1, the proportional scaling is reduced when the space is insufficient. If the flex-shrink attribute of a project is 0 and the other projects are 1, the former will not be reduced if the space is insufficient.

The negative value is invalid for this attribute.

Flex-basis attributes

The flex-basis attribute defines the main size occupied by the project before extra space is allocated ). Based on this attribute, the browser calculates whether the spindle has extra space. The default value is auto, that is, the original size of the project.

{ flex-basis: <length> | auto; /* default auto */}

It can be set to the same value as the width or height attribute (such as 350px), and the project occupies a fixed space.

Flex attributes

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. The last two attributes are optional.

 { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

This property has two shortcut values: auto (1 auto) and none (0 0 auto ).

Align-self attributes

The align-self attribute allows a single project to have an align-items attribute different from other projects. The default value is auto, indicating that the align-items attribute of the parent element is inherited. If no parent element exists, it is equivalent to stretch.

 { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.