oner-flexbox 是一个flex布局的小样式库
遵循首尾字母缩写原则
指定水平方向为容器的主轴
指定垂直方向为容器的主轴
align-items: flex-start
align-items: center
align-items: flex-end
align-items: stretch
align-items: baseline
justify-content: flex-start
伸缩项目向一行的起始位置靠齐
justify-content: center
伸缩项目向一行的中间位置靠齐
justify-content: flex-end
伸缩项目向一行的结束位置靠齐
justify-content: space-between
伸缩项目会平均地分布在行里
justify-content: space-around
align-content: space-between
align-content: space-around
在align-items
的基础上加 -M (Multiline)
eg:
align-content: flex-start
在align-items
的基础上加 -S (Self)
align-self: flex-start
flex: 1
flex: 2
………… ………… …………
flex: 10