Child elements have fixed widths

Look at the code below

<! DOCTYPEhtml>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 100%;
      height: 100px;
      display: flex;
      border: 1px solid # 333;
    }

    .con > div {
      width: 200px;
      height: 100%;
      flex-grow: 1;
      text-align: center;
      background-color: orange;
    }
  </style>
</head>
<body>
<div class='con'>
  <div></div>
  <div style='flex-grow: 2; background-color: #61dafb'></div>
  <div></div>
</div>
</body>
</html>
Copy the code

Flex-grow: 2 should be twice as much as flex-grow: 1. I wonder if there is any friend who has the same idea as me 😀

If the parent element had a width of 1440, this would be the case

  1. The first div: 1440/4=360
  2. First div: 1440/2=720
  3. The first div: 1440/4=360

butThe first div: 410, the second div: 620, the third div: 410, ~~~~

After consulting relevant materials, I learned that: The elastic box is based on the total width minus the width occupied by the child element itself, and the remaining width is distributed according to the proportion of the elastic box. For example, the total width is 1440, and the width occupied by the child element is 200*3=600, so the elastic width can be 1440-200*3=840, and the remaining width is divided into 4 parts. 840/4=210, so the first div: 200+210=410 and the second div: 200+210*2=620 the third div is the same as the first div 200+210=410

That’s right!! Happy [ing]

Remove the child element width

If I cancel the width of the child element

<! DOCTYPEhtml>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 100%;
      height: 100px;
      display: flex;
      border: 1px solid # 333;
    }

    .con > div {
      /*width: 200px; * /
      height: 100%;
      flex-grow: 1;
      text-align: center;
      background-color: orange;
    }
  </style>
</head>
<body>
<div class='con'>
  <div></div>
  <div style='flex-grow: 2; background-color: #61dafb'></div>
  <div></div>
</div>
</body>
</html>
Copy the code

The result: (This time perfectly equalized)

Give the child element no fixed width but text

<! DOCTYPEhtml>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 100%;
      height: 100px;
      display: flex;
      border: 1px solid # 333;
    }

    .con > div {
      /*width: 200px; * /
      height: 100%;
      flex-grow: 1;
      text-align: center;
      background-color: orange;
    }
  </style>
</head>
<body>
<div class='con'>
  <div>11111111</div>
  <div style='flex-grow: 2; background-color: #61dafb'>2222222</div>
  <div>3333333</div>
</div>
</body>

</html>
Copy the code

Again, in the first case, you divide by subtracting the space occupied by the children, and then you divide the rest of the space equally

I am the south flying goose, you can call me flying goose, I am a striver, in the realization of wealth and freedom on the road……

I like to share, and I like to think; I have my own life plans and dreams; But sometimes it’s confusing…

I am engaged in the IT industry and have studied many and miscellaneous technical fields: PHP, MySQL, Linux, JavaScript, Node.js, NoSQL, PhotoShop, audio and video processing, architecture cluster, network communication, life skills, three views of life, being a person, doing things and reading…

I always write down my thoughts and things to do in the near future on my public account and nuggets. I hope you pay attention to me. I am a striver and my name is Nan Feiyan