这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战
前文已简单介绍过flex应用场景、flex容器身上的属性,这次轮到flex容器内项目(子元素)的属性介绍,和父元素一样同样6个属性值,我把它们合称为66大顺
项目(子元素)
flex布局可对每个项目自行定义具体的属性,主要是关于剩余空间多余、缺少时,子元素该如何去应对
* flex-grow
当剩余空间多余时,子元素的扩张规则,默认值为:0,即有剩余空间也不扩张(如果想做自适应撑开的布局,基本要设置这个属性值)
意思就是比如三个子元素,每个设置为1,那么三个子元素均分,有一个设置的为2,那么它瓜分剩余空间的权重就多一点!,下图所示的数字代表flex-grow
属性值
* flex-shrink
这个正好和上面的 grow 相反
当剩余空间不足时,子元素的收缩规则,默认值为:1,即大家(子元素们 )都等比例缩放(如果想做定宽的,那么设置为0是个很好的选择)
flex-basis
用于设置或检索弹性盒伸缩基准值,这时候子项设置的
width
会失效,
flex-basis: 'number(一个长度单位或者一个百分比)' | 'auto';
注意点:
- 当属性值是百分比时,是以父容器的宽度作为百分比参考点;
- 当属性值是auto时,就以当前子项的宽度为基准值,比如设置了
width:200px
,那么基准值就是这个
* flex
这个也是简写,扩张、收缩、基础
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
-
简写,有几个简写需要记住下,如下表:
简写 含义 白话文 flex: 1
flex: 1, 1, 0%; 自适应收缩、扩张 flex: auto
flex: 1, 1, auto; 自适应收缩、扩张 flex: none
flex: 0, 0, auto; 不收缩也不扩张
* order
定义子元素的排列顺序,数值越小越靠前,可以是负数,默认值为0
正常情况下,就是按照你dom
结构进行排序,突发情况就是你想让中间的排列靠前,又不想调动dom
结构位置,此时这个属性就产生作用,如下图所示,left本应该是在最左边,但是给了一个order属性为1,怎么可以把它安排到末尾位置
align-self
允许重新定义该子项的
align-items
的属性值
父元素只能统一定义每个子元素的交叉轴对齐方式,但是也允许下面的子元素有权利去覆盖父元素设置的交叉轴对齐方式,相当于就是样式覆盖了,我们平常也经常也到css样式被覆盖的问题,就是权重影响的,可以类似的也这么理解,子元素的align-self
比父元素的align-items
权重高
本章小结
好嘞,flex大概的属性 都介绍完毕,结合前面几个小案例的引入,再加上这两章节对flex属性的描述(对于没有看到前文的朋友们,如果想看的话,下面有链接噢~),flex基本操作就到这了,后面基本就不会描述flex了,接下来想记录css动画了~~~