Flexible Box 模型,通常被称为 flexbox.
主轴与交叉轴:默认主轴为水平方向,从左往右。由flex-direction控制,可以取四个值:
row
主轴为水平方向,从左往右。row-reverse
主轴为水平方向,从右往左。column
主轴为竖直方向,从上往下。column-reverse
主轴为竖直方向,从下往上。
主轴确定,那么交叉轴即为与主轴垂直的另一条轴。
flex-wrap 定义轴线排不下所有元素,该如何换行。
- nowrap(默认):不换行。将元素硬塞在轴线。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
(小tips:在换行后,需要aligin-content来控制)
接下来就是一些对齐相关的属性
- justify-content- 控制主轴上所有 flex 项目的对齐。
- align-items - 控制交叉轴上所有 flex 项目的对齐。
- aligin-self- 控制交叉轴上的单个 flex 项目的对齐。
- align-content- 控制“多条主轴”的 flex 项目在交叉轴的对齐。
align-items
align-items: flex-start
flex 项目的开始端的对齐align-items: flex-end
flex 项目的结束端对齐align-items: center
flex 项目居中对齐align-items: stretch
flex 项目撑满 flex 容器align-items: baseline
flex 项目的基线对齐
align-self
给单个flex项目设置对齐属性,其拥有 align-items
的所有属性值,另外还有一个 auto
能重置自身的值为 align-items
定义的值。
justify-content
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content 与justify-content属性值一样
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
flex项排序
order属性 (从主轴开始从小到大)
控制flex子元素在主轴上的比例
flex-grow
: 这个flex子元素得到(伸张)多少positive free space?flex-shrink
: 从这个flex子元素要消除(收缩)多少negative free space?flex-basis
: 在flex子元素未伸张和收缩之前,它的大小是多少?
......