flex--伸缩性

1.flex-basis

flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。

备注:主轴横向:宽度失效;主轴纵向:高度失效

作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值auto ,即:伸缩项目

的宽或高。如果该项目未指定长度,则长度将根据内容决定。

html 复制代码
.outer {
            width: 300px;
            height: 200px;
            background-color: #888;
            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;
            flex-wrap: wrap;
           align-content: flex-start;
        }
        .inner {
            width: 50px;
            height: 50px;
            background-color: yellow;
            border: 1px solid black;
            box-sizing: border-box;
        }
<div class="outer">
        <div class="inner">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
    </div>

设置了flex-basis:80px;沿主轴方向的宽(主轴方向:row 或row-reverse)或主轴方向的高(主轴方向:column 或 column-reverse) 会变成80px,原先设置的宽或高无效


2. flex-grow(伸)

默认flex-grow:0;即使主轴有富余的空间也不拉伸.写在要拉伸的元素上

规则:

  1. 若所有伸缩项目的 flex-grow 值都为1 (或所有伸缩项目的grow值一样),则:它们将等分剩余空间(如果有空间的话)。

  2. 若三个伸缩项目的flex-grow 值分别为: 1 、2 、3 ,则:分别瓜分到: 1/6 、2/6 、

3/6 的空间。


flex-grow:0;


.inner{

flex:1

}

拉伸标志


1-4 flex-grow:0

5:flex-grow:1; 剩下的空间都给5


获取剩余空间计算公式

总的份数 = inner1的flexGrow + inner2的flexGrow + inner3的flexGrow

inner1的获得的剩余空间:(inner1的flexGrow/ 总份数) * 剩余的空间

======================================================

块1:flex-grow:0;

块2:flex-grow:1;

块3:flex-grow:2;

剩余空间:400-50*3=250

总份数:0+1+2 = 3

块1 伸展: 0/3 *250 = 0; 最后W: 50 +0 = 50px

块2 伸展: 1/3 *250 =83.33; 最后W: 50 +83.33 =133.3px

块1 伸展: 2/3 *250 = 166.66; 最后W: 50 +166.66 =216.66px


flex-shrink

概念: flex-shrink 定义了项目的压缩比例,默认为1 ,即:如果空间不足,该项目将会缩小。

html 复制代码
 .outer {
            width: 400px;
            height: 200px;
            background-color: #888;
            display: flex;
        } 
.inner1{
            width:100px;
            flex-shrink: 0;
        }
        
        .inner2{
            width:200px;
            flex-shrink: 1;
        }
        .inner3{
            width:300px;
            flex-shrink: 2;
        }

父容器 宽度:400px

所有子元素 宽度:100+200+300 = 600

所有子元素超出父容器 600-400 = 200 px; 对各个子元素进行压缩

计算总份数:块1 的 宽度 * 块1 的shrink值 + 块2 的 宽度 * 块2 的shrink值+块3 的 宽度 * 块3 的shrink值,如块3为:(300*2 /800)

即 总份数 100*0 + 200*1 + 300*2 = 800

缺少:200

块1 缩小 :(100*0 /800)* 200 = 0 变成 100-0 = 100

块2 缩小 :(200*1 /800)* 200 = 50 变成 200-50 = 150

块3 缩小: (300*2 /800)* 200 = 150 变成 300-150 = 150

设置了border,虽然设置了 box-sizing: border-box;但是浏览器会出现计算错误。把border去掉,算出来的结果就正确了。


flex 符合属性

flex 是复合属性,复合了: flex-grow 、 flex-shrink 、flex-basis 三个属性,默认值为 0 1

auto 。

如果写 flex:1 1 auto ,则可简写为: flex:auto

如果写 flex:1 1 0 ,则可简写为: flex:1

如果写 flex:0 0 auto ,则可简写为: flex:none

如果写 flex:0 1 auto ,则可简写为: flex:0 auto ------ 即 flex 初始值。

伸展


如果写 flex:1 1 0 ,则可简写为: flex:1


如果写 flex:0 0 auto ,则可简写为: flex:none


如果写 flex:0 1 auto ,则可简写为: flex:0 auto


相关推荐
web130933203984 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_23425 分钟前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254882 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭3 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc