引用自Flex 布局教程
webkit内核的浏览器必须加上-webkit前缀
设为flex布局后,子元素的float, clear和vertical-align属性将失效
水平主轴main axis(main start,main end,main size)
垂直交叉轴cross axis(cross start,cross end,cross size)
容器属性
flex-direction(主轴方向–项目排列方向):row【默认】 | row-reverse | colum | colum-reverse
flex-wrap(换行):nowrap【默认】 | wrap | wrap-reverse
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【默认:占满整个容器的高度】
align-content(对多根轴线的对齐方式):flex-start | flex-end | center | space-between | space-around | stretch
若只设定了一根轴则该属性不起作用
项目属性
order:排序。数值越小,排列越靠前,默认0
flex-grow:放大比例。默认0。即存在剩余空间也不放大
flex-shrink:缩小比例。默认1。即空间不足,项目将缩小
flex-basis:定义在分配多余空间之前,项目占据的主轴空间。默认auto
flex:flex-grow,flex-shrink和flex-basis的简写。默认0 1 auto
align-self:允许单个项目与其他项目不一样的对齐方式。可覆盖align-items属性。默认auto,表继承父元素的align-items属性,否则为stretch