On the flex: 1

Flex :1 is a short form of three properties: Flext-grow, Flex-Shirk, and Flex-Basic. The default values are flext-grow:0,flex-shirk:1, and Flex-basic :auto. Flext :1:0 :1:0 :1:0 :1:0 :1:0 :1:0 :1:0 :1:0 :1:0

Let’s first look at the definitions of the attributes of the three elastic box elements

The flex-grow property is used to set or retrieve the expansion ratio of the elastic box. The default value is 0.

The Flex-shrink attribute specifies the shrink rule for flex elements. The default value is 1.

The flex-basis property is used to set or retrieve the base value of the elastic box scaling. The default value is auto.

The conditions for these three attributes to work are the same: being an elastic box element… (With a hint of guff…)

It looks like it really is the definition, and sure enough, it depends on examples to understand what they mean

Take a chestnut

In Chapter 7, Structure and Layout, there is a bottom-hugging footer effect implemented using Flex :1. Header and footer should be as big as the contents of the elements themselves, and the main element in the middle should be small enough to keep the footer at the bottom of the page. To solve this problem, we use an elastic box layout. Look at the code below:

<! DOCTYPEhtml >
<html  >
<head>
<meta charset="utf-8" />
<title>The footer at the bottom</title>
<style>

  body{
    text-align: center;
    display: flex;;
    flex-flow: column;
    height: 100vh;
  }

  header{
    background: #abcdef;
    padding:10px 0;
    
  }

  /* Any element with a flex value greater than 0 will get the flex feature; The flex value is responsible for controlling the size allocation ratio between multiple scalable elements. 4:2 has the same effect as 2:1, because it's the numerical ratio that matters. * /
  main{
    background: #abcdef;
    margin: 20px;
    padding: 10px;
    flex: 1; 
  }

   footer {
    background: #abcdef;
    color: yellow;
    padding: 1px;
    text-shadow: 1px 1px green;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
  <header>Site name</header>
  <main>Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format. Here are some of our favorites Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, Hand-selecting these typefaces and presenting them in an easy-use format. Here are some of our favorites.</main>
  <footer>
      <p>Site name footer</p>
      <p>Site name footer</p>
  </footer>
</body>
</html>
Copy the code

Look at the difference — before: The footer comes right after the main element, and when the main element is small, the page looks ugly

Figure a.

Once the elastic box layout is set up: the middle element is filled up with very little content, allowing the footer to stay at the bottom

Figure B

Flex :1 is used here to fill up the remaining space in the elastic container. The default Flex -grow for headers and footers is 0, depending on the size of their contents.

The flex – basic: auto; With flex – basic: 0;

Flex-basic represents the initial size of the elastic element

Auto is the default value for Flex-Basic, and the length is equal to the length of the flexible item (elastic child element). If the project does not specify a length (the width or height properties are not set), the length will be determined based on the content

flex-basic:0; Even if the element has a width or height set, the value is ignored, based on the element’s own content size

So flex:1, that’s flex:1, 1, 0; Flex :1, 1, 100px; flex:1, 100px; Or flex: 1 1 px 50; Specify the initial size of the element, and the elastic element expands or shrinks from this quasi-size.

Let’s take a look at the initial size of the elastic child element with flex-grow:0 set, assuming.mian{flex:0 1 auto; } How does the page render? It’s actually the same as in picture A. You can scroll up to see what picture A looks like.

Let’s go to.main {flex:0 1 900px} and see what happens

Figure C

Flex-grow :0 is set to explore only the effect of Flex-Basic on elastic child elements. The default flex-grow value is 0, meaning that elements are not enlarged by default, whereas flex:1, 1, 0; The elastic element is expanded or shrunk based on the size of its own content until the remaining space of the parent container is filled. You can also set the element size and expand it, such as Flex :1 1 100px; The initial size of an element is 100px, and if you expand from that, you can think of it as an element that expands to a minimum size of 100px, and then expands itself.

Main {flex 0 1 0; height:1000px; The effect of}

Ok, let’s look at another example where the parent container is wide and the three elastic child elements are the same width, if one of them is set to Flex :1

<! DOCTYPEhtml >
<html  >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style>
  .wrap{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid pink;
    box-sizing: border-box;
  }

  .wrap .item{
    width: 100px;
     border: 1px solid purple;
     box-sizing: border-box;
    }

.wrap .item.specical{
  flex: 1;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
   <div class="wrap">
     <div class="item">Element 1</div>
     <div class="item specical">Element 2</div>
     <div class="item">Elements 3</div>
   </div>
</body>
</html>

Copy the code

Effect:

Special :{flex:0 1 0; } would look like this, with element 2 being sized by its content

Special :{flex:0 1 200px; width:500px; } will look like this, ignoring the element’s 500px size

Calculate the elastic box width

The total elastic box width is less than the parent container width

<! DOCTYPEhtml >
<html  >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style>
  .container {display:flex;width:1000px;height:100px; }.one{ flex:1 1 100px; }.two{ flex:2 2 100px; }.three{ flex:1 2 100px; }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
   
   <div  class="container">
     <div class="one">one</div>
     <div class="two">two</div>
     <div class="three">three</div>
   </ul>
</body>
</html>

Copy the code

Sum of elastic box widths: 100px + 100px + 100px=300px

Exceed width: 1000px – 300px =700px

With flex-grow set, the extra 700px will be split up by each elastic element

The details are as follows:

First partition width: 700px/(1/4)=175px Second partition width: 700px/(2/4)=350px Third partition width: 700px/(1/4)=175pxCopy the code

Combined with the base size of the element itself, the width of the three elements is:

First: 100+175=275px Second: 100+350=450px Third: 100+175=275pxCopy the code

The hidden point here is that although the flexing shirk value is set, it is not used in the calculation because the width of the parent container 1000 is much larger than the sum of the elastic children 100+100+100. Flexing shirk does not work when the parent container is larger than the elastic children width, so it is ignored.

The total width of the elastic box is greater than that of the parent container

<! DOCTYPEhtml >
<html  >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style>
 .container {display:flex;width:200px;height:100px; }.one{ flex:2 1 100px; }.two{ flex:2 2 100px; }.three{ flex:1 2 100px; }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
 
  <div  class="container">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </ul>
</body>
</html>

Copy the code

The parent container is 200px wide

Elastic sum of child widths (here take the flex-basic value of each child element) 100 + 100 + 100 =300px, the child container will overflow 300px-200px=100px

Since the shrink factor is set, the weighted synthesis is: 1 * 100 + 2 * 100 + 2 * 100 =500px

The three child element overflows and the heaviest width are:

The first one :(1*100px)/500px * 200px = 20px child element width: 100px-20px=80px The second one :(2*100px)/500px * 200px = 40px child element width: Third :(2*100px)/500px * 200px = 40px Child element width: 100px-40px=60pxCopy the code

Flexing basic is not involved in width calculations when the sum of elastic children is greater than the parent container, because the parent container has no room to expand.