css3中flex-basis与width的区别

1. width和flex-basis同时存在时

    .flex-wrap{
      display: flex;
      width: 600px;
      height: 100px;
      border: 1px solid #ddd;
    }
    .flex-item{
      width: 200px;
      flex-basis: 100px;
    }
    .item1{
      background: #66efab;
    }
    .item2{
      background: #efe24e;
    }
    .item3{
      background: #ef6754;
    }
    .item4{
      background: #ef9fef;
    }
    .item5{
      background: #191def;
    }

<div class="flex-wrap">
    <div class="flex-item item1">item1</div>
    <div class="flex-item item2">item2</div>
    <div class="flex-item item3">item3</div>
    <div class="flex-item item4">item4</div>
    <div class="flex-item item5">item4</div>
  </div>

效果：

分析：
当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度

2. 只存在width情况，且flex items宽度和大于flex容器宽度

    /*仅展示修改部分*/
    .flex-item{
      /*flex-basis: 100px;*/
      width: 200px;
    }
    .item1{
      background: #66efab;
      width: 100px;
    }

所有flex item等比例被压缩到充满flex容器
结果分析:

当flex空间不够时，由于flex-shrink的默认值为1，所以所有flex items容器等比例被压缩

3. 当存在flex-basis，所有的flex item是宽度之和大于flex容器宽度

    /* 仅展示修改的代码*/
    .flex-item{
      flex-basis: 300px;
      width: 200px;
    }
    .item1{
      background: #66efab;
    }

结果分析：
这种情况同2类似，都是在flex-shrink的作用下等比例缩小

4. max-width对flex items宽度的影响

    /*仅展示修改部分*/
    .flex-item{
      flex-basis: 300px;
      max-width: 100px;
    }
    .item1{
      background: #66efab;
    }

结果分析:
max-width决定了flex items的最大宽度

5. min-width对flex items宽度的影响

    /*仅展示修改内容*/
    .flex-item{
      flex-basis: 80px;
      min-width: 100px;
    }
    .item1{
      background: #66efab;
    }

结果分析：
min-width决定了flex items的最小宽度