难记点:
flex容器属性
-
flex-flow:
<flex-direction:row>
<flex-wrap:nowrap>
-
align-content:
flex-start | flex-end | center | space-between | space-around | stretch
需要区分于常用的align-item
,这个是对多个轴线进行设置对齐方式,如果只有一根轴线,则不起作用-
flex-start:轴线全部在交叉轴上的起点对齐(盗的图)
-
center:轴线全部在交叉轴上的中间对齐(盗的图)
-
flex子项属性
-
flex-basic 重点记忆!!! :定义了在分配剩余空间前,项目占据的主轴空间,浏览器根据这个属性,计算剩余空间,默认为auto,也就是项目本身的大小,如果设置了其他值,那么
width
会失效 -
flex-grow 重点记忆!!! : 定义项目的放大比例,默认值为0,也就说剩余空间再大也不会放大。如果有剩余空间, 这个属性为非0时会生效
-
flex-shrink 重点记忆!!! :定义项目的缩小比例,默认值为1,也就是说剩余空间不够时,该项目将缩小
-
flex 重点记忆!!!:
<flex-grow:0>
<flex-shrink:1>
<flex-basic:auto>
- 当值为一个非负数字时,该值为
flex-grow
的值,flex-shrink:1
,flex-basic:0%
; - 当值为长度值时,该值为
flex-basic
的值,flex-grow:1
,flex-shrink:1
- 如果是两个非负数字时,该值依次为
flex-grow
和flex-shrink
的值,flex-basic:0%
; - 如果第一个为非负数字,第二个为长度值时,该值依次为
flex-grow
和flex-basic
的值,flex-shrink
:1`;
- 当值为一个非负数字时,该值为
-
align-self 重点记忆!!! :对单个项目设置对其方式,覆盖
align-item
的值,默认值为auto