来详细认识下flex子元素身上的属性

1,778 阅读3分钟

这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战

前文已简单介绍过flex应用场景flex容器身上的属性,这次轮到flex容器内项目(子元素)的属性介绍,和父元素一样同样6个属性值,我把它们合称为66大顺

项目(子元素)

flex布局可对每个项目自行定义具体的属性,主要是关于剩余空间多余、缺少时,子元素该如何去应对

* flex-grow

当剩余空间多余时,子元素的扩张规则,默认值为:0,即有剩余空间也不扩张(如果想做自适应撑开的布局,基本要设置这个属性值)

意思就是比如三个子元素,每个设置为1,那么三个子元素均分,有一个设置的为2,那么它瓜分剩余空间的权重就多一点!,下图所示的数字代表flex-grow属性值

flex-grow.png

* flex-shrink

这个正好和上面的 grow 相反

当剩余空间不足时,子元素的收缩规则,默认值为:1,即大家(子元素们 )都等比例缩放(如果想做定宽的,那么设置为0是个很好的选择)

flex-basis

用于设置或检索弹性盒伸缩基准值,这时候子项设置的width会失效,

flex-basis: 'number(一个长度单位或者一个百分比)' | 'auto';

注意点:

  • 当属性值是百分比时,是以父容器的宽度作为百分比参考点;
  • 当属性值是auto时,就以当前子项的宽度为基准值,比如设置了width:200px,那么基准值就是这个

* flex

这个也是简写,扩张、收缩、基础

flex:   <'flex-grow'> <'flex-shrink'> <'flex-basis'>
  • 简写,有几个简写需要记住下,如下表:

    简写含义白话文
    flex: 1flex: 1, 1, 0%;自适应收缩、扩张
    flex: autoflex: 1, 1, auto;自适应收缩、扩张
    flex: noneflex: 0, 0, auto;不收缩也不扩张

* order

定义子元素的排列顺序,数值越小越靠前,可以是负数,默认值为0

正常情况下,就是按照你dom结构进行排序,突发情况就是你想让中间的排列靠前,又不想调动dom结构位置,此时这个属性就产生作用,如下图所示,left本应该是在最左边,但是给了一个order属性为1,怎么可以把它安排到末尾位置

order.png

align-self

允许重新定义该子项的align-items的属性值

父元素只能统一定义每个子元素的交叉轴对齐方式,但是也允许下面的子元素有权利去覆盖父元素设置的交叉轴对齐方式,相当于就是样式覆盖了,我们平常也经常也到css样式被覆盖的问题,就是权重影响的,可以类似的也这么理解,子元素的align-self比父元素的align-items权重高

本章小结

好嘞,flex大概的属性 都介绍完毕,结合前面几个小案例的引入,再加上这两章节对flex属性的描述(对于没有看到前文的朋友们,如果想看的话,下面有链接噢~),flex基本操作就到这了,后面基本就不会描述flex了,接下来想记录css动画了~~~

flex系列往期回顾

1、flex应用场景

2、flex容器身上的属性