flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕。
下面六种属性是作用在容器上:
伸缩流方向
flex-direction:row|colum...;
伸缩流换行
flex-wrap:wrap;
主轴对齐方式
justify-content:space-between|around;
从轴对齐
align-items:baseline|strech;
简写
flex-flow:
堆栈伸缩行:指定多个伸缩项目行在从的对齐方式
align-content:
项目:
第一层子元素
项目也可能是 “容器”
order:排序;0
flex-grow:0; 成长比 1
flex-shrink:1; 缩放比 0(不缩放)
align-self:同交叉轴
....