Mobile terminal -flex item attribute

1.align-self Alignment of individual items on the cross axis

• flex-start： Align the starting points of the intersecting axes .
• flex-end： The ends of the intersecting axes are aligned .
• center： Align the midpoint of the intersecting axis .
• baseline: Baseline alignment of the first line of text for the project .
• stretch（ The default value is ）： If the project is not set to height or set to auto, Will occupy the height of the whole project .

.box .con:nth-of-type(1){
				background-color: #f00;
				/* align-self: auto; */
				/* align-self: flex-start; */
				align-self: flex-end;
				/* align-self: center; */
			}

2.order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0 , It can only be integers

.box .con:nth-of-type(2){
				background-color: #0f0;
				order: 1;
			}

3.flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in  

.box .con:nth-of-type(2){
				background-color: #0f0;
				flex-grow: 2;
			}
.box .con:nth-of-type(3){
				background-color: #00f;
				flex-grow: 1;
			}

4.flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink . 

.box .con{
				width: 200px;
				height: 200px;
				flex-shrink: 1;
			}

5.flex-basis Property defines before allocating extra space , Spindle space occupied by the project （main size）.

Browser according to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project . 

It can be set to follow width or height Property is the same value （ such as 350px）, Then the project will occupy a fixed space . 

6.flex The attribute is flex-grow, flex-shrink  and  flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional .