CSS3 flex layout study guide for mobile web pages

Flexbox usually allows us to better operate its sub-element layout. Here is a brief summary of the CSS3 flex layout study guide for mobile web pages. Friends in need can refer to

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

footer{ display:flex; }

2. Next, add the flex-flow attribute to the footer:

flex-flow:row wrap;

row means display in rows, wrap sets whether to wrap when the parent element is too small.
Note that flex-flow is defined together with the two properties of flex-direction and flex-wrap. They can also be set separately.
Attributes of flex-direction:
row: row display; column: column display; row-reverse/column-reverse: display in the reverse direction

##3, align- Item attributes:
flex-start: Align the head of each pflex-end: Align the tail of each p
center: Align based on the center line
stretch : Fill the entire area, that is, the head and tail are aligned

4. The justify-content attribute
is used to set the form of blank space. In making a line, there are Very convenient when working with multiple parts.For example, if there are three small p's displayed side by side in the parent p, but their total width is less than the total width of the parent p, you can use this method for layout. The specific parameters are as follows:
flex-start: white space At the very end
flex-end: The blank part is at the very beginning
The above two blank methods treat the three small p's as a whole, leaving the blank at one end
space- between: Evenly spaced space in the middle
space-around: Evenly spaced space in the middle + both sides
The above two are equivalent to splitting the three p blocks and dividing them equally into the parent p. The only difference between the two is So instead of leaving white space on both sides
Attachment: How to use justify-content to center the element vertically and horizontally

p{ justify-content:center; align-items:center; display:-webkit-flex; }

The above is the detailed content of CSS3 flex layout study guide for mobile web pages. For more information, please follow other related articles on the PHP Chinese website!