CSS3 Flex Layout Learning guide for mobile Web pages

Flexbox usually allows us to better manipulate the layout of his sub-elements, here a little to refine the mobile Web page CSS3 Flex Layout Learning Guide, the need for friends can refer to the following

1, start using the Flexbox layout method, the code is as follows:

footer{   Display:flex;   }

2. Next add the Flex-flow property for footer:

Flex-flow:row Wrap;

Row indicates that the line is displayed, and wrap sets whether the parent element wraps over the hour.
Note that Flex-flow is a combination of the flex-direction and flex-wrap two attributes, which can be set separately.
Properties of the Flex-direction:
Row: line display; column: columns display; Row-reverse/column-reverse: Display in the opposite direction

3. Align-item Properties:
Flex-start: Aligns the head of each P
Flex-end: Aligns the tails of each P
Center: Align Centerline
Stretch: Fills the entire area, that is, the head and tail are aligned

4. Justify-content Properties
Used to set the form of white, which is convenient when you have multiple parts in a row.
For example, there are three small p in the parent p side-by, but their total width is less than the total width of the parent p, you can use this method to lay out the following parameters:
Flex-start: Leave the white part at the very end
Flex-end: Leave the white part at the beginning of the place
The above two ways to stay white is to take three small p as a whole, stay white at one end
Space-between: Middle Evenly white
Space-around: Middle + left side evenly white
The above two are equivalent to split three p blocks into the parent p, the difference is not only on both sides also left white
Attachment: The way in which elements are centered vertically horizontally using justify-content

p{   Justify-content:center;   Align-items:center;   Display:-webkit-flex;   }