A detailed explanation of flex-basis attribute usage in CSS3

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.