容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction:决定主轴方向
该属性默认是row,主轴为水平方向,从左到右排序
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap:控制元素项是否换行
默认值是nowrap,不换行
- nowrap(默认值):不换行
- wrap:换行
- wrap-reverse:第一排紧贴底部换行
flex-flow:flex-wrap和flex-direction的简写集合,默认是nowrap row
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:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order:定义项目的排序顺序,从0开始,越小越排在前面
flex-grow:用于放大某个项目,默认值为0
flex-shrink:用于缩小某个项目,默认值为1
flex-basis:用于设置项目宽度,默认值auto
flex:flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度,默认0 1 auto
align-self:控制某个项目和其他不一样的对齐方式
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
- auto