一,容器属性
1. flex-direction
定义:主轴的方向(即项目的排列方向),默认值row
值: row →
row-reverse ←
column ↓
column-reverse ↑
2. flex-wrap
定义:一条轴线排不下,如何换行,默认值nowrap
值: nowrap | wrap | wrap-reverse
3. flex-flow
定义: <flex-direction><flex-wrap>简写,默认值row nowrap
4. justify-content
定义: 项目在主轴上的对齐方式(与主轴方向有关,以下值的释义假设主轴从左到右)
值: flex-start 左对齐(默认值)
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔相等
space-around: 每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍
5. align-items
定义: 项目在交叉轴上的对齐方式(对齐方式与交叉轴的方向有关,以下值的释义假设交叉轴方向从上到下)
值: flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度
6. align-content
定义:多个轴线的对齐方式,如果项目只有一条轴线,该属性不起作用
值: flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平分
space-around 每个轴线之间的距离都相等,所以,轴线之间的间隔比轴线到边框的距离大一倍
stretch(默认值) 轴线占满整个交叉轴
二,项目的属性
1. order
定义: 项目的排列顺序,数值越小,排列越靠前,默认值0
2. flow-grow
定义: 项目的放大比例,默认值0,即如果不存在剩余空间也不放大
3. flex-shrink
定义: 项目的缩小比例,默认值1,即如果空间不足,该项目缩小
注意:1) 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
2) 如果一个项目的flex-shrink的属性为0,其他项目都为1,则空间不足时,前者不缩小。
3)负值对该属性无效
4. flex-basis
定义: 分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间,默认值是auto,即项目本来大小
值: length(eg 350px) | auto
5. flex
定义: <flex-grow><flex-shrink><flex-basis>的缩写
默认值: 0 | auto,后面的两个属性可选
快捷值: auto( 1 1 auto)和none(0 0 auto)
6. align-self
定义: 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
值: auto | flex-start | flex-end | center | baseline | stretch