Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to quickly manipulate the CSS3flex layout of the mobile Web page. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

1. Start using flexbox layout. The code is as follows:

CSS Code copies content to the clipboard

Footer {display:flex;}

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

CSS Code copies content to the clipboard

Flex-flow:row wrap

Row indicates that the line is displayed by line, and wrap sets whether the parent element wraps when the parent element is too small.

Note that flex-flow is defined by the combination of flex-direction and flex-wrap attributes, or it can be set separately.

Properties of flex-direction:

Row: row display; column: column display; row-reverse/column-reverse: display in the opposite direction

3. Align-item attribute:

Flex-start: align the head of each div

Flex-end: align the tail of each div

Center: aligning to centerline

Stretch: fill the entire area, that is, the head and tail are aligned

4. Justify-content attribute

It is used to set the form of white space, which is very convenient when there are multiple parts in a line.

For example, if three small div are displayed side by side in the parent div, but their total width is less than the total width of the parent div, you can use this method to layout. The specific parameters are as follows:

Flex-start: the white space is at the end

Flex-end: leave the blank at the very beginning

The above two ways of leaving blank are to treat the three small div as a whole, leaving blank at one end.

Space-between: evenly divided white space in the middle

Space-around: middle + equal white space on both sides

The above two are equivalent to splitting three div blocks into the parent div, and the only difference between them is whether they are left blank on both sides.

Attachment: the way to center the element vertically and horizontally by using justify-content

CSS Code copies content to the clipboard

Div {justify-content:center; align-items:center; display:-webkit-flex;} this is the end of the CSS3flex layout on how to quickly manipulate the mobile Web page. I hope the above content can be of some help and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.