flex弹性盒子布局中，关于flex-grow布局问题设置

先粘贴上一段代码，flex总体布局

<body>
  <div class="total">
    <div class="one">第一个</div>
    <div class="two">第二个</div>
    <div class="three">第三个</div>
  </div>
</body>

css样式

*{
      margin:0;
      padding: 0;
    }
    .one{
      background: #f00;
    }
    .two{
      background: #0f0;
      height: 30px;
    }
    .three{
      background: #00f;
      height: 60px;
    }
.total{
      width: 900px;
      height: 100px;
      display: flex;
      display: -webkit-flex;
      background: #ff0;
      flex-direction: row;
      -webkit-flex-direction:row;
      flex-wrap:wrap;
      -webkit-flex-wrap:wrap;
      justify-content:space-between;
      -webkit-justify-content:space-between;
    }
    .total>div{
      flex-grow:1;
      -webkit-flex-grow:1;
    }
    .total>.two{
      flex-grow:2;
      -webkit-flex-grow:2;
    }

第二个div设置flex-grow为2，另外两个均为1.

实际效果第二个div并没有是其他两个div的宽度的二倍，似乎是不到二倍，但确实是比另外两个要大，这是为什么呢？

后来经过一番折腾终于搞明白了，是自己的理解有误，参考于阮一峰先生的相关文章，链接在这里flex布局教程。

自己总结了三个解决办法：

一、结合flex-basis

将整体div样式进行修改，加入flex-basis属性

.total>div{
      flex-grow:1;
      -webkit-flex-grow:1;
      flex-basis:0;
      -webkit-flex-basis:0;
    }

设置项目固定空间均为0；
二、不单设置flex-grow属性，设置flex综合属性

这一点在阮一峰文章中有提到，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

单单设置flex-grow的数值时，因为这时flex-basis的值为auto，项目占据了相应的固定空间，导致设置错误。

.total>div{
      flex:1;
    }
 .total>.two{
      flex:2;
    }

三、去掉div文本内容

这种方法是使div中不含有固定宽度，设置二倍不成功的根本原因就在这儿，因为div中的文本占有固定宽度，我们都知道flex-grow设置的是剩余空间的大小分配，而剩余空间就是去掉文本之后的空间，大家可以自己计算一下，为什么不是我们想要的二倍，去掉div中的文本，就相当于去掉了固定空间，如下

<body>
  <div class="total">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</body>

    .total>div{
      flex-grow:1;
      -webkit-flex-grow:1;
    }
     .total>.two{
      flex-grow:2;
      -webkit-flex-grow:2;
    }

这样设置出来也是二倍关系，当然，这种方法肯定不推荐

其实，这三种方法的原理实际上是一样的，都是使固定空间为0，切记flex-grow设置的是剩余空间的分配比例，分配之前一定要先除去实际固定空间在进行计算。

第一次发博客，不足之处望读者多多指教！

flex弹性盒子布局中，关于flex-grow布局问题设置

猜你喜欢