容器的属性
flex-direction
控制主轴的方向
row(默认值)
主轴为水平方向, 起点在左端
row-reverse
主轴为水平方向,起点有右端
column
主轴为垂直方向,起点在上方
column-reverse
主轴为垂直方向,起点在下方
flex-wrap
控制项目是否换行
nowrap(默认值)
默认不换行, 项目自适应挤压
wrap
换行,第一行在上方
wrap-reverse
换行,第一行在下方
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式, 默认值是 row nowrap
- 简写属性
justify-content
flex-start(默认值)
默认左对齐
flex-end
右对齐
center
居中对齐
space-between
两端对齐,项目之间的间隔相等
space-around
每个项目两侧的间隔相等, 所以, 项目之间的间隔比项目与边框的间隔大一倍
align-items
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴居中对齐
baseline
项目的第一行文字的基线对齐
stretch(默认值)
如果项目未设置高度或设为auto,将占满整个容器的高度
align-content
flex-start
与交叉轴的起点对齐
flex-end
与交叉轴的终点对齐
center
与交叉轴的中心点对齐
strech(默认值)
轴线占满整个交叉轴
space-between
与交叉轴的两端对齐,轴线之间的间隔平均分布
space-around
每根轴线两侧的间隔相等,所以,轴线之间的间隔比边框的间隔大一倍.
项目的属性
order
定义项目的排列顺序. 数值越小, 排列越靠前
- 默认值: 0
flex-grow
定义项目的放大比例, 默认为 0 , 即如果存在剩余空间, 也不放大
- 默认值: 0
flex-shrink
定义了项目缩小的比例, 默认为1, 即如果空间不足, 该项目将缩小
值为缩小所占的比例
0便是不缩放
- 默认值: 1
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间.
浏览器根据这个属性, 计算主轴是否有多余空间.
默认值为auto, 即项目本来的大小
优先级高于width或height设置的值
- 默认值: auto
flex
这个属性是flex-grow,flex-shrink和flex-basis的简写
默认值: 0 1 auto
一般仅定义第一个属性
这个属性有两个快捷值:
auto(1 1 auto)
none(0 0 auto)
- auto (1 1 auto)
- none (0 0 auto) (默认值)
align-self
该属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
auto
继承父元素的align-items属性,若父元素没有定义align-items属性则等同于stretch
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中心点对齐
baseline
项目的第一行文字的基线对齐
stretch
如果项目未设置高度或设为auto,将占满整个容器