Flex子项目

Flex布局中子项目的各项属性

Flex容器的子项目排列和分布、缩小与放大、对齐方式等属性讲解

2018-05-23侠课岛    基础入门       

前端/前端必修/使用CSS3的Flex弹性布局 18     0     2520

上节介绍了Flex布局父容器的各项属性,接下来我们来介绍Flex布局中子项目的各项属性,子项目一共有6个属性,主要规定了子项目的排序以及放大压缩比等等:

order - 定义子项目的排列顺序

默认值为0,接收的值的类型只能为数字,数值越小,排列越靠前,也可以是负值噢~当我们需要对页面上的排序进行重新布局的时候,只需要改变子项目的order属性,而不用去挪动真正的元素,对于一些动态渲染的情况是十分实用的啦~  
我们把案例中序号为3的子项目,设置它的order值为-1,把序号为5的项目,设置order值为1,然后看下渲染出来的效果~需要注意的是它改变的只是它自己的排序,其他子项目还是会按照文档的正常顺序来渲染。

28.png

flex-grow - 定义子项目的放大比例

默认值为0,表示不放大,值只能为正数。在动态盒模型里面,子项目的大小受到容器剩余空间的影响,如果容器存在剩余空间,而且flex-grow的值不为0,子元素就会被放大。放大的比例取决于数字的大小,如果所有子项目的值都为1,则它们平分剩下的空间,如果其中一个子项目的值为2,则它放大的比率是其他子项目的2倍。换句话说flex-grow的值代表了子项目在剩余空间里能分的空间的权重。

例如:容器container的宽度为600px,里面有三个子项目,宽度都为100px,设置它们的flex-grow都为1,表示平分剩余空间。首先我们可知剩余空间为600-(100*3)=300,每一项增加的宽度的计算公式为:
300/(1+1+1) = 100。所以每项的宽度变成200px。

30.png

如果设置子项目1的值为0,设置子项目2的值为1,子项目3的值为2,计算公式分别如下:
子项目2增加的宽度:300/(0+1+2)*1 = 100
子项目3增加的宽度:300/(0+1+2)*2 = 200
那么渲染的结果就如下,子项目1保持100px不变,子项目2变成200px,子项目3变成300px。

31.png

flex-shrink - 定义子项目的缩小比例

默认值为1,表示当容器剩余空间不足时,子项目会默认按比例缩小,0表示不缩小,此属性的值也只能为正数。与flex-grow属性一样,它只规定子项目自己的缩小比例。所以当在使用Flex布局的时候,如果希望保持子项目的设置的宽度不变,一定要手动将flex-shrink设置为0呀例如:容器container的宽度为300px,里面有三个子项目,宽度都为200px,设置它们的flex-shrink都为1,收缩之后,每项收缩的宽度计算公式如下:
300/(1+1+1) = 100。所以每项的宽度变成100px。

32.png

如果设置子项目1的收缩值为1,设置子项目2的收缩值为2,子项目3的收缩值为3,计算公式如下:
子项目1收缩的宽度: 300/(1+2+3)*1 = 50 子项目2收缩的宽度: 300/(1+2+3)*2 = 100 子项目3收缩的宽度: 300/(1+2+3)*2 = 150

当然,这里的公式搞不清楚也没有关系,反正只要我们设置好值,浏览器会帮我们自动计算布局,这里只是为了方便大家更好的理解这个两个属性啦~
另外,需要注意的是,flex-grow和flex-shrink都会受到min-width以及max-width的影响,一旦设定,子项目不会超出这个设定范围。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?