A detailed explanation of flex-basis attribute usage in CSS3

Source: Internet
Author: User

The explanation for Flex-basis on the WebPlatform1 is:

The Flex-basis CSS property describes the initial main size of the flex item before any free spaces is distributed Accordin G to the flex factors described in the Flex property (Flex-grow and Flex-shrink).
Before the Flex container allocates the remaining space, the flex-basis determines the size of the flex item in the main direction.
Its value has two kinds of 2:

Percentages refer to the Flex container ' s inner main size
Computed value as specified, with lengths made absolute
Percent – based on the Flex container's main direction size

Calculated value – Absolute number
Calculated Value #

When Flex-grow with Flex-shrink, the calculated value is flex-basis similar to Max-width.
Browsers automatically shrink them when the Flex-container main direction size is not large enough to hold the flex-basis sum of flex items.
Give a piece of code to explain:

The code is as follows Copy Code
<div class= ' Grid ' >
<div class= ' A ' > I have seen the flourishing of the Earth in Heaven </div>
<div class= ' last ' > Chen San said </div>
</div>
<style>
. example-grid{
Color:white;
Display:flex;
width:400px;
border:1px solid red;
}
. example-first{
Background:green;
flex-basis:400px;
}
. example-last{
Background:orange;
flex-basis:200px;
}
</style>

The style results are as follows:

Here, the width of the. Example-first is the width of the 267px,.example-last is 133px, and they are computed in this way:

The code is as follows Copy Code
. Example-first (width) = 400 * (400/(400 + 200)) = 266.666666667
. Example-last (width) = 400 * (200/(400 + 200)) = 133.333333333

In other words, Flex Container distributes the size of flex items proportionally.

Percentage

The percentages are the same as the calculated values, and if flex container enough to contain the Flex-basis value of flex items, 10% means that the flex container in the main direction is multiplied by 10%.
If Flex container is not sufficient to contain the Flex-basis value of flex items, such as:

The code is as follows Copy Code
<div class= "Example2-grid" >
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
. example2-grid{
BORDER:3PX solid black;
Display:flex;
height:200px;
}
. Example2-grid Div:nth-of-type (1) {
Background:rgb (0, 137, 250);
flex-basis:100%;
}
. Example2-grid Div:nth-of-type (2) {
Background:rgb (105, 0, 88);
flex-basis:20%;
}
. Example2-grid Div:nth-of-type (3) {
Background:rgb (255, 59, 0);
flex-basis:30%;
}
. Example2-grid Div:nth-of-type (4) {
Background:rgb (0, 197, 73);
flex-basis:40%;
}
</style>

The code is styled as follows:

Where the first flex item has a flex-basis value of 100%, its main size ratio is calculated by:

The code is as follows Copy Code
100%/(100% + 20% + 30% + 40%) = 52.631578947%

Real design or implementation of the page, we usually do not do such calculations, but understand the calculation process, the bottom of the heart, encounter problems, we know how to solve.

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.