[CSS Elastic box Model flex-basis Properties] Elastic box Model Flex Layout Flex-basis Property explanation and the difference between example demonstration

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.