CSS3 flex 布局
container 属性
item 属性
order ——————-/ 项目排列顺序，值小靠前 /flex-grow —————/ item 有剩余空间缩放比例，默认为0，不缩放 /flex-shrink ————-/ item 空间不足时缩小比例，默认为1，该项目将缩小。 /flex-basis ————–/ 在分配多余空间之前，项目占据的主轴空间 /flex ——————–/ 前三项的缩写，默认为 0 1 auto /align-self ————–/ 允许单个项目有与其他项目不一样的对齐方式 覆盖align-items /
Flex 是Flexible Box的缩写，意为”弹性布局 “，
行内元素:1 2 3 .box { display : inline-flex; }
Webkit内核的浏览器，必须加上-webkit前缀。
1 2 3 4 .box { display : -webkit-flex; display : flex; }
注意 :设为Flex布局以后，子元素的
float 、
clear 和
vertical-align
概念
container 属性
flex-direction 决定主轴的方向 ( 项目的排列方向 )
1 2 3 4 row（默认值）： //主轴为水平方向，起点在左端。 row-reverse： //主轴为水平方向，起点在右端。 column： //主轴为垂直方向，起点在上沿。 column-reverse： //主轴为垂直方向，起点在下沿。
flex-wrap 主轴不能容纳如何换行
1 2 3 nowrap（默认值）： //不换行。 wrap: //换行，第一行在上方。 wrap-reverse： //换行，第一行在下方。
flex-flow flex-direction 属性和
flex-wrap 属性 的简写形式
justify-content 项目在主轴上的对齐方式
1 2 3 4 5 flex-start（默认值）： //左对齐 flex-end： //右对齐 center： //居中 space-between： //两端对齐，项目之间的间隔都相等。 space-around： //每个项目两侧的间隔相等
align-items 项目在交叉轴上如何对齐
1 2 3 4 5 flex-start： //交叉轴的起点对齐。 flex-end： //交叉轴的终点对齐。 center： //交叉轴的中点对齐。 baseline: //项目的第一行文字的基线对齐。 stretch（默认值）： //如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 多根轴线的对齐方式，只有一根轴不起作用
1 2 3 4 5 6 flex-start： //与交叉轴的起点对齐。 flex-end： //与交叉轴的终点对齐。 center： //与交叉轴的中点对齐。 space-between： //与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around： //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）： //轴线占满整个交叉轴。
item 属性
order 项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 在分配多余空间之前，项目占据的主轴空间
flex flex-grow ,
flex-shrink 和
flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式
可覆盖
align-items 属性。默认值为auto，表示继承父元素的
align-items 属性，
如果没有父元素，则等同于stretch。
1 2 3 4 5 flex-start： //交叉轴的起点对齐。 flex-end： //交叉轴的终点对齐。 center： //交叉轴的中点对齐。 baseline: //项目的第一行文字的基线对齐。 stretch（默认值）： //如果项目未设置高度或设为auto，将占满整个容器的高度。
文章参考：原文链接
评论和共享
