React Native-flex Layout

React Native-flex Layout
Basic concept of flex Layout

Flex is the abbreviation of Flexible Box, meaning "elastic layout", used to provide maximum flexibility for the Box model. 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: main axis and 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 properties:

FlexDirection: The layout direction, which determines the direction of the spindle. The default value is column, that is, the vertical layout.

Row | horizontal layout, with the spindle in the horizontal direction

　

Column "vertical layout, the spindle is vertical
Examples/qrbLPC9wPg0KPHA + Y2VudGVyo7rW99bhtcTW0LzkzrvWwzxiciAvPg0KPGltZyBhbHQ9 "here write picture description" src = "http://www.bkjia.com/uploads/allimg/160416/043430J12-3.png" title = "\"/>

Flex-end: the end position of the spindle

Space-between: insert gaps of the same distance between the project and the project

Space-around: insert gaps of the same distance on both sides of the project

AlignItems: Specifies the cross-axis direction alignItems. The default value is flex-start, that is, the start of the Cross-axis.

Flex-start: the beginning of the Cross-Axis

Center: the center of the cross axis

Flex-end: the end position of the cross axis

FlexWrap: contains content. The default value is nowrap. It does not enclose all content.

Nowrap: no package content

Wrap: Package content

Flex: Layout weight
Projects with 0 flex = 0 occupy only the space required for the content. Projects with flex = 1 occupy all the remaining space.

1:1