flex笔记

60 阅读1分钟

难记点:

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:轴线全部在交叉轴上的起点对齐(盗的图)

      img
    • center:轴线全部在交叉轴上的中间对齐(盗的图) img

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-growflex-shrink的值,flex-basic:0%;
    • 如果第一个为非负数字,第二个为长度值时,该值依次为flex-growflex-basic的值,flex-shrink:1`;
  • align-self 重点记忆!!! :对单个项目设置对其方式,覆盖align-item的值,默认值为auto