pk10赛车计划软件百度云

Fuzhou website construction only needs 1,000 yuan to include domain name space, details 18558752805

  • css flex-grow, flex-shrink, flex-basis

Fuzhou Website Construction > Web News > Web Design >
The first is flex-basis. Basis means "main component" in English, so when you put it together with width, you must kill the width. Whenbasis encounters width, he will say that I am the main component. You are the secondary component. So when you meet me, you have to stand back.


The second is flex-grow. The English meaning of "grow" is "expand, expand, increase." To grow, I have to grow up. How can I grow, of course, it is the space to share the parent element. See the second attribute below


Finally, flex-shrink, shrink means "shrink," in English, which means that when the width of the parent element is less than the sum of the width of the child elements, and exceeds the width of the parent element, at this time, flex-shrink will say outside The world is too bitter, let me return to my father's arms! Therefore, flex-shrink will shrink in a certain proportion. See the third attribute below


First attribute: flex-basis


This property is used to set the width of the element. In fact, width can also set the width. If both width and flex-basis are set on an element, the value of width will be overwritten by flex-basis.


<style type = "text / css" media = "screen">
.box {
display: flex;
margin: 100px auto;
width: 400px;
height: 200px;
}
.inner {
width: 200px;
height: 100px;
flex-basis: 300px;
background: pink;
}
</ style>
</ head>
<body>
<div class = "box">
<div class = "inner">
</ div>
</ div>
</ body>
See the following figure: I set the width to width: 200px; flex-basis: 300px; the results show that the child element .inner has the attribute flex-basis applied;






Second attribute: flex-grow


This property is used to set how the child element allocates the remaining space of the parent element when the width of the parent element is greater than the sum of the widths of all child elements (that is, the parent element will have remaining space). The default value of flex-grow is 0, which means that the element does not ask for the remaining space of the parent element. If the value is greater than 0, it means request. The larger the value, the more demanding it is.


For example: The parent element is 400px wide and has two child elements: A and B. A is 100px wide and B is 200px wide. The free space is 400- (100 + 200) = 100px. If neither A nor B ask for the remaining space, there is 100px of free space.


<body>
<div class = "box">
<div class = "inner">
</ div>
<div class = "inner1">
</ div>
</ div>
</ body>
.box {
display: flex;
flex-direction: row;
margin: 100px auto;
width: 400px;
height: 200px;
border: 1px solid red;

}
.inner {
flex-basis: 100px;
height: 100px;
background: pink;
}
.inner1 {
flex-basis: 200px;
height: 100px;
background: blue;
}
See below:






If A asks for the remaining space: set flex-grow to 1, B does not ask. Then the final size of A is the width of itself (100px) + the width of the remaining space (100px) = 200px.


.inner {
flex-basis: 100px;
height: 100px;
background: pink;
flex-grow: 1;
}
.inner1 {
flex-basis: 200px;
height: 100px;
background: blue;
}
See below:






If both A and B are set to obtain the remaining space, A sets flex-grow to 1 and B sets flex-grow to 2. The final size of A is the width of its own space (100px) + the remaining space obtained by A (100px (1 / (1 + 2))), and the final size of B is its own width (200px) + the width of the remaining space obtained by B (100px (2 / (1 + 2))) (Here I only gave formulas, friends can do the calculations themselves)


.inner {
flex-basis: 100px;
height: 100px;
background: pink;
flex-grow: 1;
}
.inner1 {
flex-basis: 200px;
height: 100px;
background: blue;
flex-grow: 2;
}
See below:






Third attribute: flex-shrink


This property is used to set how the child element reduces its width when the width of the parent element is less than the sum of the widths of all child elements (that is, the child element will exceed the parent element). The default value of flex-shrink is 1. When the width of the parent element is less than the sum of the widths of all child elements, the width of the child elements will decrease. The larger the value, the more severe the reduction. If the value is 0, it means no reduction.


For example: The parent element is 400px wide and has two child elements: A and B. A is 200px wide and B is 300px wide. Then the total width of A and B beyond the parent element is (200 + 300)-400 = 100px. If neither A nor B reduce the width, that is, set flex-shrink to 0, then the width of 100px will exceed the parent element.


.box {
display: flex;
flex-direction: row;
margin: 100px auto;
width: 400px;
height: 200px;
border: 1px solid red;

}
.inner {
flex-basis: 200px;
height: 100px;
background: black;
flex-shrink: 0;
}
.inner1 {
flex-basis: 300px;
height: 100px;
background: blue;
flex-shrink: 0;

}
See below:






If A does not reduce the width: set flex-shrink to 0, B decreases. Then the size of the final B is its own width (300px)-a total exceeding the width of the parent element (100px) = 200px


.inner {
flex-basis: 200px;
height: 100px;
background: black;
flex-shrink: 0;
}
.inner1 {
flex-basis: 300px;
height: 100px;
background: blue;
flex-shrink: 1;

}
See below:






If both A and B are reduced in width, A sets flex-shirk to 3 and B sets flex-shirk to 2. Then the final size of A is its own width (200px)-the reduced width of A (100px * (200px * 3 / (200 * 3 + 300 * 2))) = 150px, and the final size of B is its own width (300px)- B reduced width (100px * (300px * 2 / (200 * 3 + 300 * 2))) = 250px


.inner {
flex-basis: 200px;
height: 100px;
background: black;
flex-shrink: 3;
}
.inner1 {
flex-basis: 300px;
height: 100px;
background: blue;
flex-shrink: 2;

}
See below:






The editor here is a bit clear. Flex is the abbreviation of flex-grow, flex-shrink, flex-basis (note the order of small writing). You can remember the following abbreviation rules:


For example, if flex is set to none, the calculated value is 0 0 auto, which is equivalent to the following:


.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
When flex is set to auto, the calculated value is 1 1 auto, which is equivalent to the following:


.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
When flex is a non-negative number, the number is flex-grow, flex-shrink is 1, and flex-basis is 0%, which are equivalent as follows:


.item {flex: 1;}


.item {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}


When the flex value is a length or percentage, it is regarded as a flex-basis value, flex-grow is set to 1, flex-shrink is set to 1, and the following are equivalent (note that 0% is a percentage and not a non-negative number):




.item-1 {flex: 0%;}
.item-1 {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}
.item-2 {flex: 24px;}
.item-2 {flex-grow: 1; flex-shrink: 1; flex-basis: 24px;}
When the flex value is two non-negative numbers, it is regarded as the value of flex-grow and flex-shrink respectively, and flex-basis is taken as 0%, which is equivalent as follows:


.item {flex: 2 3;}
.item {flex-grow: 2; flex-shrink: 3; flex-basis: 0%;}
When the flex value is a non-negative number and a length or percentage, it is regarded as the value of flex-grow and flex-basis, respectively. Flex-shrink takes 1, which is equivalent to the following:
.item {flex: 2333 3222px;}
.item {flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;}


————————————
Scan QR code to share on WeChat
confirm

Copyright © 2014-2019 buxie520.com Fuzhou website production