音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

css Flex布局的可伸缩性(Flexibility)
日期:2021-09-06 09:02:45   来源:脚本之家

Flexibility

Flex伸缩布局决定性的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间,也会按照 收缩比率 缩小各项目以避免溢出。

Flex属性

flex属性可用来指定 可伸缩长度 的部件:扩展比率,收缩比率,伸缩基准线。当有一个元素是伸项目时,flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则flex属性不生效。

flex 是 flex-grow、flex-shrink、flex-basis的缩写

css;">
.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  1. <'flex-grow'> 取值为 <number> ,用来指定项目的扩展比率;若在flex缩写省略了此属性值,则flex-grow的指定值是 1;
  2. <'flex-shrink'>取值为 <number> ,用来指定项目的收缩比率;若在flex缩写省略了此属性值,则flex-shrink的指定值是 1;
  3. <'flex-basis'>取值为 <length> | auto ,用来定义在分配多余空间之前,项目占据的主轴空间,也就是子元素的基准值,flex-basis 规定的范围取决于 box-sizing;若在flex缩写省略了此属性值,则flex-basis的指定值是 0%。

flex-basis取值的几种情况:

  1. 固定的长度值,(比如350px),则该项目将占据固定长度的空间;
  2. auto,首先会检索该项目的主尺寸(也就是该项目的width/height的值,是width还是height取决于主轴的方向,下面假设主轴的方向为水平方向),如果该项目的主尺寸不为auto,则该项目的flex-basis(基准值)采用主尺寸的值;如果该项目的主尺寸为auto(也就是width:auto或不设置项目的width属性时),则使用该项目的内容content大小为基准值;
  3. 百分比,根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。

flex 的常见值

flex的默认值:由于 flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto,所以flex的默认值为:flex:0 1 auto;

css;">
.item {
    flex: 0 1 auto;
}
/*这种情况先根据width/height属性决定元素的尺寸。
(如果项目的主尺寸为auto,则会以其内容大小为基准)
当剩余空间为正值时,伸缩项目无法伸缩,但当空间不足时,伸缩项目可收缩至其[最小]值。
默认状态下,伸缩项目不会收缩至比其最小内容尺寸更小。
可以通过设置「min-width」或「min-height」属性来改变这个默认状态。*/

flex: 0 auto:由于之前提到过,若在flex的缩写中省略了flex-shrink的值,则该值指定为 1,所以flex:0 auto就相当于flex:0 1 auto(也就是与flex取默认值一样);

flex: initial:与flex:0 1 auto相同;

flex: auto: 若在flex的缩写中省略了flex-grow和flex-shrink的值,则他们的值都指定为 1,所以flex:auto就相当于flex:1 1 auto;

.item {
    flex: auto;  /*相当于flex:1 1 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全可以伸缩,会吸收主轴上剩下的空间*/

flex:none:相当于flex: 0 0 auto;

.item {
    flex: none;  /*相当于flex:0 0 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全不可以伸缩*/

当flex取值为某个正数时,则这个正数是flex-grow的取值,由于在flex的缩写中省略了flex-shrink和flex-basis的值,而他们在被省略了时的取值分别为1、0%,所以flex:1就相当于flex:1 1 0%;

.item {
    flex: 1;  /*相当于flex:1 1 0%;*/
}
/*以父容器的宽度为基数计算,元素完全可伸缩*/

当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1(注意 0% 是一个百分比而不是一个非负数字);

.item {
    flex:120px;  /*相当于flex:1 1 120px;*/
}
.item1 {
   flex: 0%; /*相当于flex:1 1 0%;*/
}

当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%;

.item {
    flex:2 1;  /*相当于flex:2 1 0%;*/
}

当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1;

.item {
    flex:2 120px;  /*相当于flex:2 1 120px;*/
}

举例

html如下:

<div class="box">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
  </div>

css如下:

.box {
  display: flex;
  width: 800px;
}
.box > div {
  height: 200px;
}
.item-1 {
  width: 160px;
  flex: 2 1 0%;
  background: #2ecc71;
}
.item-2 {
  width: 100px;
  flex: 2 1 auto;
  background: #3498db;
}
.item-3 {
  flex: 1 1 200px;
  background: #9b59b6;
}

得到的结果如下:

css Flex布局的可伸缩性(Flexibility)

主轴上父容器总尺寸为 800px

子元素的总基准值是:0% + auto + 200px = 300px,其中

  1. - 0% 即 0 * 800px = 0宽度
  2. - auto 对应取主尺寸即 100px

故剩余空间为 800px - 300px = 500px

伸缩放大系数之和为: 2 + 2 + 1 = 5

剩余空间分配如下:

  1. - item-1 和 item-2 各分配 2/5,各得 200px
  2. - item-3 分配 1/5,得 100px

各项目最终宽度为:

  1. - item-1 = 0% + 200px = 200px
  2. - item-2 = auto + 200px = 300px
  3. - item-3 = 200px + 100px = 300px

当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 160px,也并没有什么用,形同虚设

而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间

总结

flex 的缺省值并非是单一属性的初始值,在flex属性取值的缩写中,flex-grow 、 flex-shrink 、flex-basis的缺省值分别为1 、 1 、0%,而不是这三属性分别的默认值0、 1 、auto;

当项目没有设置固定宽度(对于水平的情况,也就是宽度本身是auto的)时,flex-basis如果也是auto,那么flex-basis的使用值就是该项目的内容本身撑起来的宽度(对于水平的情况)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    教程标签
    HTMLCSSDreamweaverFrontpage