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

This article mainly introduces "the introduction of flex-grow, flex-shrink and flex-basis attributes in CSS and the method of realizing Nine Palace Grid layout". In daily operation, it is believed that many people have doubts about the introduction of flex-grow, flex-shrink and flex-basis attributes in CSS and the method of realizing Nine Palace Lattice layout. The editor consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful for you to answer your doubts about the introduction of the attributes of flex-grow, flex-shrink and flex-basis in CSS and the method of realizing the layout of the ninth palace grid. Next, please follow the editor to study!

1. Flex-grow, flex-shrink, flex-basis attributes

Flex-grow: defines the share of the remaining space. The default is 0, that is, if there is remaining space, it is not zoomed in.

Flex-shrink: defines the reduction of the project. The default value of flex-shrink is 1, and the value of 0 does not scale.

Flex-basis: defines the spindle space occupied by the project. According to this property, the browser calculates the size of the excess or insufficient space of the spindle. Its default value is auto, which is the original size of the project.

Flex-basis takes precedence over the width attribute. If only the width property is set and flex-basis is auto, the original length of the project is equal to width, while if both width and flex-basis are set, the original length of the project is equal to flex-basis.

Example:

HTML Code:

1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9

CSS Code:

. flex-attr {margin-bottom: 600px; width: 580px; display: flex;}. Item-1 {width: 100px; flex-grow: 1; flex-shrink: 1;}. Item-2 {width: 100px; flex-grow: 2; flex-shrink: 2;}. Item-3 {width: 200px;}. Pink {background-color: pink;}. Skyblue {background-color: skyblue;}. Gray {background-color: gray;}

When the width of the parent element div.flex-attr is greater than the width of the three child elements, the width of the three child elements is enlarged. Because the flex-grow of the third child element is 0 by default, it is not zoomed in, so only the width of the first two child elements is zoomed in, with a magnification of 1:2.

In this example, the width of the parent element is set to 580px, and it is calculated that the width of the parent element is more than the width of the three child elements. According to the magnification, the width of the div.item-1 is enlarged by 180 (1px3) = 60pxdiv.itemly2 = 120px, so the final width of the three child elements is 160px220px200px, as shown in the following figure:

When the width of the parent element div.flex-attr is less than the width of the three child elements, the width of the three child elements decreases. The scale of reduction is: the width ratio of the child element * the flex-shrink attribute scale. For example, if the width ratio of the three child elements is 1, the width ratio of the three child elements is 1, and the proportion of the magical flexure shrink property is 1:2:1 (the flex-shrink of the third child element is 1 by default), the scale is reduced to 1:2:2.

In this example, the width of the parent element is set to 320px, and it is calculated that the width of the three child elements is more than the width of the parent element 80px. According to the reduction ratio, the width of div.item-1 is reduced by 80 (1x5) = 16pxdiv.itemly2 and the width of div.item-3 is reduced by 80 (2x5) = 32px, so the final width of the three child elements is 84px volume 68pxjournal 168px, as shown in the following figure:

Second, the layout of the ninth palace.

1) use flex to implement

HTML Code:

1 2 3 4 5 6 7 8 9

CSS Code:

.squ-4 {position: relative; width: 100%; height: 0; padding-bottom: 100%; / * padding percentage is calculated relative to the parent element width * / margin-bottom: 30px;} .squ-4. Squ-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100% / * fill the parent element container so that the width and height are always equal * /} .squ-4. Squ-inner > div {width: calc (98% / 3); height: calc (98% / 3); margin-right: 1%; margin-bottom: 1%; overflow: hidden;}. Squ-4 .flex {display: flex; flex-wrap: wrap;} .flex > div {flex-grow: 1; background-color: skyblue; text-align: center Color: # fff; font-size: 50px; line-height: 2;} .flex > div:nth-of-type (3n) {margin-right: 0;} .flex > div:nth-of-type (naugh7) {margin-bottom: 0;}

It is important to note that in order to make each grid equal in width and height, the div.item is wrapped in two layers of parent elements. The outermost div.squ-4 uses height: 0 and padding-bottom: 100%, because the padding percentage is calculated relative to the width of the parent element, so setting the width: 100% and height: 100% of the div.squ-inner element will always make the width and height of the element equal.

2) using Grid to implement

HTML Code:

1 2 3 4 5 6 7 8 9

CSS Code:

.squ-5 {position: relative; top: 0; left: 0; height: 0; padding-bottom: 100%;} .squ-5. Squ-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat (3, 1fr); grid-template-rows: repeat (3, 1fr); grid-auto-flow: row;}. Squ-5 .item {background-color: pink Border: 1px solid # fff;} at this point, the study on "the introduction of the attributes of flex-grow, flex-shrink and flex-basis in CSS and the method of realizing the layout of the ninth palace grid" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.