flex中的flex-basis

flex-basis表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度，flex items的min-width,max-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>

展示结果

image1.png

分析：
当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;
    }

展示结果

image2.png

所有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;
    }

展示结果

image3.png

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

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

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

展示结果

image4.png

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

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

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

image5.png

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

6. flex items的应用准则

content -> width -> flex-basis (limted by max|min-width)

注：当flex items的宽度和大于flex容器的宽度是，flex items的宽度还是会缩小

7. 关于其他属性对flex items的影响

这部分内容暂时不打算整理

本文目的仅仅是为了个人查找阅读等提供方便

最后编辑于：2018.06.10 22:22:09

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

flex中的flex-basis