CSS Selector
CSS flex
flex
- flex-grow:：
伸长以吸收 flex 容器中剩余的可用空间(available space) - flex-shrink：
收缩以适应 flex 容器 - flex-basis：flex 元素在主轴方向上的
初始大小（可为元素width属性的任意有效值）
flex 值
- initial
- flex-grow: 0
- flex-shrink: 1
- flex-basis: auto
不伸长去吸收额外空间，会缩短以适应容器
- auto
- flex-grow: 1
- flex-shrink: 1
- flex-basis: auto
会伸长去吸收额外空间，会缩短以适应容器
- none
- flex-grow: 0
- flex-shrink: 0
- flex-basis: auto
失去弹性，不伸长也不收缩
flex-flow
用于同时定义flex-direction(主轴方向)和flex-wrap(元素换行)的简写
- flex-direction
- row(默认值)
- row-reverse
- column
- column-reverse
- flex-wrap
- nowrap(默认值)
- wrap
- wrap-reverse
align-self
用于定于元素（相对于交叉轴的）对齐方式
align-items
用于将元素定义为一个组并一同声明元素对齐方式
- flex-start
- flex-end
- center
justify-self
用于定义元素（相对于主轴的）两端对齐方式
justify-content
用于将元素定义为一个组并一同声明组该组元素整体（也就是内容）的两端对齐方式
- space-between
- flex-start
- center
- flex-end
- space-around
CSS box model | 盒模型
CSS color function hsla
hsla(H, S, L[, A])
- H - hue(色彩)
- red - 0(deg) / 360(deg)
- green - 120(deg) / 480(deg)
- blue - 240(deg) / -120(deg)
- S - saturation(饱和度)
- 100% - white（completely saturated，完全饱和）
- 0% - gray（completely unsaturated，完全不饱和）
- L - lightness(亮度)
- 100% - white
- 0% - black
- 50% - “normal”
- A - alpha(透明度)
- 0% - transparent（完全透明的）
- 100 - full opacity（完全不透明）