The difference between flex:1 and flex

 

In mdn

  • flex:1

    • means the same as

  • flex-grow:1 .

    • However, in fact it has different show in browser.

    You can try it in this jsFiddle by changing the comment in css.

    When I use flex: 1 the element who's classname is test-container will be height:100% but it won't happen when you use flex-grow: 1 .

    I don't understand why. Looking for some help. Thanks very much. 

    .flex-1 {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: red;
}

.child-1 {
  height: 50px;
  background: blue;
}

.child-2 {
  flex-grow: 1;
  /* flex:1; */
  background: green;
}

.test-container {
  display: flex;
  flex-direction: row;
  background: white;
  height: 100%;
}
    <div class="flex-1">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="test-container"></div>
  </div>
</div>

    flex

    The flex property is a shorthand for setting:

  • flex-grow
  • flex-shrink
  • flex-basis

    • The flex: 1 rule is supposed to compute to this:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

    • These values are defined in the spec. See section 7.1.1. Basic Values of flex

    I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as px or % , is appended to the 0 value in flex-basis . This can make a difference (example).

    flex-grow

    The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and flex-basis at their initial values.

    So when you set flex-grow: 1 , the browser renders this:

  • flex-grow: 1 (overrides the default value, which is 0)
  • flex-shrink: 1 (this is the default value)
  • flex-basis: auto (this is the default value)

    • The difference between flex: 1 and flex-grow: 1

    Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0 , and the latter keeps the default flex-basis: auto .

    For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:

  • Make flex-grow expand items based on their original size

    • Your code example

    The reason you're seeing a difference in your code is that flex-basis controls height in a column-direction container.

    In Chrome, with flex-basis: auto , the height of the element is 450px (500px parent - 50px header). In other words, flex-grow is free to distribute the free space.

    With flex-basis: 0 , the height of the element is 0, and flex-grow has no free space to distribute.

    The height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:

  • Working with the CSS height property and percentage values
  • Chrome / Safari not filling 100% height of flex parent

    • In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.

    l get the reason why that happen. In fact

    flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

    the key is the flex-basis:0% . If you use flex-grow:1 ,the flex-basis will be auto. In this sutation, you can't let the height:100% work .

    However I don't sure when the

    flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

    will happen. In the doc

    flex:1 !== flex-grow:1;flex-shrink:1;flex-basis:0%

    链接地址: http://www.djcxy.com/p/75688.html

    上一篇: 行包装盒中的嵌套列柔性盒

    下一篇: flex：1和flex之间的区别