flex弹性盒子模型

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:同交叉轴
....

上一篇:Markdown 语法


下一篇:弹性布局(display:flex;)属性详解