Do you know the difference between flex: 1, flex: Auto, flex: 0, flex: None?

This is the sixth day of my participation in Gwen Challenge

The cause of

More and more people are already using Flex layouts, and flex properties are very useful, vertical center, horizontal center, in minutes. Today I saw a Flex property with values of 1, Auto, 0, None, etc. Take the opportunity to practice and write it down.

Flex properties

The flex attribute is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 Auto. Flex-grow indicates whether to expand if there is enough space, 0 indicates whether to shrink if there is not enough space, and 1 indicates whether to shrink flex-basis indicates the size of the project itself. The default value is Auto

Flex :1, flex:auto, flex:0, flex: None

flex: 1

Flex: 1; flex: 1; flex: 1; flex: 1; flex: 1

flex: auto

Flex: auto, corresponding to 1 1 auto, can be expanded or shrunk, flex-basis is auto

Flex: 1 vs. Flex: Auto

flex: 1

  <div class="container">
    <div class="item">Test Test Test Test Test Test Test Test Test Test Test Test Test test</div>
    <div class="item">Test test test test test test</div>
    <div class="item">Test test test test test test</div>
  </div>
  <style>
    .container {
      display: flex;
      height: 100px;
    }

    .item {
      flex: 1;
      border: 1px solid red;
    }
  </style>
Copy the code

flex: auto

  <div class="container">
    <div class="item">Test Test Test Test Test Test Test Test Test Test Test Test Test test</div>
    <div class="item">Test test test test test test</div>
    <div class="item">Test test test test test test</div>
  </div>
  <style>
    .container {
      display: flex;
      height: 100px;
    }

    .item {
      flex: auto;
      border: 1px solid red;
    }
  </style>
Copy the code

Explanation:

Flex: 1 If the content is the same, the space is divided equally. Flex: Auto if the content is the same, the space is divided equally.

flex: 0

Flex: 0; flex: 0; flex: 0; flex: 0; flex: 0

flex: none

Flex: None 0 0 auto indicates that flex-basis is auto

Let’s look at flex: 0 and Flex: None:

flex: 0

  <div class="container">
    <div class="item">Test Test Test Test Test Test Test Test Test Test Test Test Test Test test 1</div>
    <div class="item">Test test test test test test</div>
    <div class="item">Test test test test test test</div>
  </div>
  <style>
    .container {
      display: flex;
      height: 100px;
    }

    .item {
      flex: 0;
      border: 1px solid red;
    }
  </style>
Copy the code

flex: none

  <div class="container">
    <div class="item">Test Test Test Test Test Test Test Test Test Test Test Test Test Test test 1</div>
    <div class="item">Test test test test test test</div>
    <div class="item">Test test test test test test</div>
  </div>
  <style>
    .container {
      display: flex;
      height: 100px;
    }

    .item {
      flex: none;
      border: 1px solid red;
    }
Copy the code

Explanation:

In flex: 0, the width of a div is the width of a word, while in Flex: None, the width of the content itself is the same

conclusion

Here are the four flex attributes 1, Auto, 0, and None. You can look at your own scenarios and decide which one to use. We can try the code, knock a knock, better deepen their memory.