专栏首页web秀CSS中Flex布局的可伸缩性(Flexibility)

CSS中Flex布局的可伸缩性(Flexibility)

Flexibility

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

Flex属性

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

flexflex-growflex-shrinkflex-basis的缩写

    .item {
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
  • <'flex-grow'> 取值为 <number> ,用来指定项目的扩展比率若在flex缩写省略了此属性值,则flex-grow的指定值是 1
  • <'flex-shrink'>取值为 <number> ,用来指定项目的收缩比率若在flex缩写省略了此属性值,则flex-shrink的指定值是 1
  • <'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-growflex-shrinkflex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto,所以flex的默认值为:flex:0 1 auto;
    .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-growflex-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-shrinkflex-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-growflex-shrink 的值,flex-basis 取 0%;
    .item {
        flex:2 1;  /*相当于flex:2 1 0%;*/
    }
  • 当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-growflex-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;
    }
  • 主轴上父容器总尺寸为 800px
  • 子元素的总基准值是:0% + auto + 200px = 300px,其中
    - 0% 即 0 * 800px = 0宽度
    - auto 对应取主尺寸即 100px
  • 故剩余空间为 800px - 300px = 500px
  • 伸缩放大系数之和为: 2 + 2 + 1 = 5 剩余空间分配如下:
    - item-1 和 item-2 各分配 2/5,各得 200px
    - item-3 分配 1/5,得 100px

各项目最终宽度为:

    - item-1 = 0% + 200px = 200px
    - item-2 = auto + 200px = 300px
    - item-3 = 200px + 100px = 300px
  • 当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 160px,也并没有什么用,形同虚设
  • 而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间

总结

  • flex 的缺省值并非是单一属性的初始值,在flex属性取值的缩写中,flex-growflex-shrinkflex-basis的缺省值分别为1 、 1 、0%,而不是这三属性分别的默认值0、 1 、auto;
  • 当项目没有设置固定宽度(对于水平的情况,也就是宽度本身是auto的)时,flex-basis如果也是auto,那么flex-basis的使用值就是该项目的内容本身撑起来的宽度(对于水平的情况)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3中Flex弹性布局该如何灵活运用?

    Flex(Flexible Box),意为”弹性布局”。“弹性”,顾名思义,就是具有弹簧的特性啦,能够自由的伸缩(有点自适应的意思啦)。

    Javanx
  • CSS3中Flex布局(弹性布局)

    Flex是Flexible Box的缩写,就是灵活的弹性页面布局。 作用是为盒子模型提供强大的灵活性功能;

    Javanx
  • CSS伪类:CSS3鼠标滑过按钮动画第二节

    有了第一小节的经验,我们可以对直接的动画效果做一些升级效果,如果组合:before、:after,效果有更酷。

    Javanx
  • 全栈开发工程师微信小程序-上

    wx:for是列表渲染标签,默认当前循环项的变量名为item.wx:key用于在动态列表渲染中保存子项的特征和状态.

    达达前端
  • 30分钟彻底弄懂flex布局

    在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇?

    elson
  • Flex入坑指南

    弹性布局flex是一个几年前的CSS属性了,说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局,什么posti...

    贾顺名
  • Vue.js学习笔记(5)

    容器默认两个轴 main axis:水平主轴 cross axis:垂直交叉轴

    程序员不务正业
  • CSS学习 - 盒模型&flex

    ** display: flex 使下级元素变成弹性盒子,垂直平均切分 本来是这样子的:

    千往
  • 2019,6 招帮助你更好的开发小程序

    原生开发小程序有了两个项目,在原生开发小程序经验技巧方面有一些自己的总结,此篇文章做原创分享!

    Fundebug
  • 给萌新的Flexbox简易入门教程

    近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flex...

    葡萄城控件

扫码关注云+社区

领取腾讯云代金券