Home > Developer > Web Develop
To set or retrieve the Flex box scaling reference value:
If the sum of the base values of all child elements is greater than the remaining space, the remaining space is scaled proportionally according to the base value of each setting
Calculated value – Absolute number: when the Flex-container main direction is not large enough to hold the flex-basis sum of flex items, the browser automatically shrinks them
Instance:
<!DOCTYPE HTML><HTMLLang= "Zh-cmn-hans"><Head><MetaCharSet= "Utf-8" /><title>FLEX-BASIS_CSS Reference manual _web front-end Development Reference manual series</title><Metaname= "Author"content= "Joy Du (Rain fog), [email protected], www.doyoe.com" /><style>. Grid{Color:#FFF;Display:-webkit-flex;width:400px;Border:1px solid Red;}. First{background:Green;flex-basis:400px;}. Last{background:Orange;flex-basis:200px;}</style></Head><Body> <Divclass= ' Grid '> <Divclass= ' first '>I have seen the bustling land in the sky</Div> <Divclass= ' last '>Chen San said.</Div> </Div></Body></HTML>
Analytical:
Here, the width of the. First is 267px,.last width is 133px, and they are calculated as:
| The code is as follows | |
| . Example-first (width) = 400 * (400/(400 + 200)) = 266.666666667 . Example-last (width) = 400 * (200/(400 + 200)) = 133.333333333 |
|
That is, Flex container proportionally distributes the size of flex items
Calculated value – Percent:
The percentage is the same as the calculated value, if Flex container is sufficient to contain the Flex-basis value of flex items, then 10% means that the flex container is multiplied by 10% in the main direction.
If Flex container is not enough to contain the Flex-basis value of flex items
Instance:
<!DOCTYPE HTML><HTMLLang= "Zh-cmn-hans"><Head><MetaCharSet= "Utf-8" /><title>-WEBKIT-FLEX-BASIS_CSS Reference manual _web front-end Development Reference manual series</title><Metaname= "Author"content= "Joy Du (Rain fog), [email protected], www.doyoe.com" /><style>. Example2-grid{Border:3px solid Black;Display:-webkit-flex;width:700px;Height:200px;}. Example2-grid div:nth-of-type (1){background:RGB (0, 137, +);-webkit-flex-basis:100%;//190/100}. Example2-grid Div:nth-of-type (2){background:RGB (0, +);-webkit-flex-basis:20%;}. Example2-grid Div:nth-of-type (3){background:RGB (255, 0);-webkit-flex-basis:30%;}. Example2-grid Div:nth-of-type (4){background:RGB (0, 197,);-webkit-flex-basis:40%;}</style></Head><Body> <Divclass= "Example2-grid"> <Div></Div> <Div></Div> <Div></Div> <Div></Div> </Div></Body></HTML>
Analytical:
Where the first flex item has a value of flex-basis of 100%, its main size percentage is calculated:
| The code is as follows | |
| 100%/(100% + 20% + 30% + 40%) = 52.631578947% | |
When we really design or implement a page, we usually can't do such a calculation, but understand the calculation process, the heart of the bottom, encounter problems, we know how to solve.
[CSS Elastic box Model flex-basis Properties] Elastic box Model Flex Layout Flex-basis Property explanation and the difference between example demonstration
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
