Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis

Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis

The functions of the three attributes flex-grow, flex-shrink, and flex-basis are:

In flex layout, how do child elements distribute the parent element's space when the parent element has different widths?

(Note: These three properties are set on child elements. The following article will talk about parent elements, which refers to elements with flex layout (display:flex))

The editor here will teach you how to quickly remember these three attributes:

The first is flex-basis. Basis means "main component" in English. So when it is put together with width, width will definitely be eliminated. When basis meets width, it will say that I am the main component and you are the secondary component, so you have to stand aside when you see me.

The second is flex-grow. The English meaning of grow is <expand, extend, increase>. This means that when the width of the parent element is greater than the sum of the widths of the child elements, and the parent element has a surplus, then flex-grow will say I want to grow, I want to grow up. How can I grow? Of course, by sharing the space of the parent element. See the content of the second attribute below

The last one is flex-shrink. Shrink means <shrink> in English. This means that when the width of the parent element is less than the sum of the widths of the child elements and exceeds the width of the parent element, flex-shrink will say that the world outside is too bitter, so I'd better go back to my father's arms! Therefore, flex-shrink will shrink according to a certain ratio. See the third attribute below.

The first property: flex-basis

This attribute 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 figure below: I set the width to width:200px; flex-basis:300px; the result shows that the sub-element .inner applies the attribute flex-basis;

The second property: flex-grow

This property is used to set how child elements distribute 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 request the remaining space of the parent element. If the value is greater than 0, it means it requests it. The bigger 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 claims the remaining space, there will be 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 the figure below:

If A asks for the remaining space: set flex-grow to 1, B does not ask for it. The final size of A is its own width (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 the figure below:

If A and B both claim the remaining space, A sets flex-grow to 1 and B sets flex-grow to 2. Then the final size of A is its own width (100px) + the width of 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 the editor only gives the formula, friends can calculate it by themselves)

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

See the figure below:

The third property: 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 element will be reduced. The larger the value, the greater the reduction. If the value is 0, it means no decrease.

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 exceeding the parent element is (200+300)-400 = 100px. If neither A nor B reduces their width, that is, both set flex-shrink to 0, then the width of the parent element will be 100px.

 .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 the figure below:

If A does not decrease in width: set flex-shrink to 0 and B decreases. The final size of B is its own width (300px) - the total width exceeding 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 the figure below:

If both A and B reduce their width, A sets flex-shirk to 3 and B sets flex-shirk to 2. 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) - the reduced width of B (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 the figure below:

Here, the editor makes it clear that flex is the abbreviation of flex-grow, flex-shrink, flex-basis (note the order of the letters). You can remember the following abbreviation rules:

For example, if the flex value is none , the calculated value is 0 0 auto. The following are equivalent:

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

When flex is 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, that number is the flex-grow value, flex-shrink is 1, and flex-basis is 0%. The following are equivalent:

.item {flex: 1;}

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

When flex is a length or percentage, it is considered the flex-basis value, flex-grow is 1, flex-shrink is 1, and the following are equivalent (note that 0% is a percentage rather than 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 flex takes two non-negative numbers, they are considered as the values ​​of flex-grow and flex-shrink respectively, and flex-basis takes 0%. The following are equivalent:

.item {flex: 2 3;} 
.item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%;} 
When flex takes a non-negative number and a length or percentage, they are treated as the values ​​of flex-grow and flex-basis respectively, and flex-shrink takes 1. The following are equivalent: 
.item {flex: 2333 3222px;} 
.item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;}

This is the end of this article about the detailed explanation of CSS flexible box flex-grow, flex-shrink, and flex-basis. For more related flex-grow, flex-shrink, and flex-basis content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of the use of the <meta> tag in HTML

>>:  A brief discussion on DDL and DML in MySQL

Recommend

CSS navigation bar menu with small triangle implementation code

Many web pages have small triangles in their navi...

How to draw a cool radar chart in CocosCreator

Table of contents Preface Preview text Graphics C...

How to solve the problem that MySQL cannot start because it cannot create temporary files

Problem Description I recently encountered a prob...

Summary of Operator Operations That Are Very Error-Prone in JavaScript

Table of contents Arithmetic operators Abnormal s...

Virtual machine clone Linux centos6.5 system network card configuration graphic tutorial

As a newbie who has just come into contact with t...

How to convert a string into a number in JavaScript

Table of contents 1.parseInt(string, radix) 2. Nu...

Detailed explanation of the process of building and running Docker containers

Simply pull the image, create a container and run...

Detailed explanation of Nginx regular expressions

Nginx (engine x) is a high-performance HTTP and r...

CSS position fixed left and right double positioning implementation code

CSS Position The position attribute specifies the...

Detailed steps to install MySQL 5.6 X64 version under Linux

environment: 1. CentOS6.5 X64 2.mysql-5.6.34-linu...

Tutorial on installing PHP on centos via yum

First, let me introduce how to install PHP on Cen...

Docker creates MySQL explanation

1. Download MySQL Image Command: docker pull mysq...

Pure CSS to achieve the list pull-down effect in the page

You may often see the following effect: That’s ri...

A graphic tutorial on how to install redhat 8.0 system (a must-have for beginners)

Table of contents 1. Introduction 2. Installation...

Trash-Cli: Command-line Recycle Bin Tool on Linux

I believe everyone is familiar with the trashcan,...