flex

erduo75985
94 阅读2分钟

参考文章

developer.51cto.com/article/683…

常用： 两栏布局，左边固定，右边去占据"剩余空间"
.container {
    display: flex;
}
.left {
    width: 200px;
    ...
}
.right{
    flex:1
}
解析：flex等价于=>flex:1 1 auto => 
{
    flex-grow: 1; // 使得该子元素自动分配剩余的空间 n1/(n1+...)*剩余宽度+自身宽度。
                  // 假设contianerWidth = 500px rifghtWidth = 200px 则结果为
                  // 1/1*(500-200-200)+200 =300px
    flex-shrink:1; // 只有子元素宽度和>父级盒子宽度，才会生效使得left元素缩小，这里
                   // 子元素总宽度没有超出所以并不生效
    flex-basic: auto; //保持自身宽度，无影响。
}

flex-grow

是什么：元素放大的比例,flex-grow的作用是分配可用空间,默认值为0不允许放大。
flex-grow:auto - 默认内容宽度
flex-grow:0 - 保持内容宽度或者width,不分配多余空间 
flex-grow:n - 按n分配剩余空间，分配完毕的元素宽度计算公式为 n1/(n1+n2+n3+...)*resWidth + itemWidth。

参考图文来源：developer.51cto.com/article/683… image.png

flex-shrink:

是什么？
flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。
特点：
生效时机：只有总宽度小于子元素之和的时候；
flex-shrink: 0 - 就算所有子元素的宽度超过父级容器也不收缩
flex-shrink: n - 所有子元素的宽度之和超过父容器则元素分别按照n值收缩进行收缩

flex-basic

是什么？
flex-basis可以设为跟width或height属性一样的值(比如350px，默认值为 auto)，则项目将占据固定空间
默认值：auto - 盒子的width或者默认内容宽度
flex-basic: 0 - 不设置子元素默认初始宽度
flex-basic: n% | npx - 设置子元素的默认初始宽度 
影响：
    1.若定义了值，flex-grow和flex-shrink会在减去flex-basic后再去计算剩余空间。
    2.flex-basic: npx 会覆盖 width: npx ,优先级更高。

flex: auto | 1

flex: auto - 等价于 flex: 1 1 auto ,看到的效果为非均分,子元素根据内容而占据宽度,并用flex-grow分配剩余空间
(速记 本身宽度 + 剩余宽度*1/n)
flex: 1 - 子元素的大小取决于内容。因此，内容越多的flex项目就会越大。等价于 flex: 1 1 0 ，看到的效果为均分,即不分配默认宽度，均分所有空间 
(速记 子元素宽度=总width*1/n)
avatar
文章
阅读
粉丝