flex笔记

难记点：

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