都在用的Flex布局神器

一、Flex（flexible box）

任何一个容器都可以指定为 Flex 布局。

display: flex; //将对象作为弹性伸缩盒展示
display: -wekit-flex; //webkit内核浏览器上使用需加上前缀

display: inline-flex; //行内元素使用flex布局

二、容器属性

 以下6个属性均设置在容器上

flex-direction: row | row-reverse | colum | colum-reverse    //决定项目的排列方向

flex-wrap: nowrap | wrap | wrap-reverse    //定义换行情况

flex-flow: <flex-direction> || <flex-wrap>  //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 // 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

三、项目属性

以下6个属性均设置在项目上

order: <整数>   //项目的排列顺序，默认为0，数值越小排列越靠前

flex-grow: <数字>  //项目的放大比例，默认为0，有空间剩余也不放大

flex-shrink: <非负整数>   //项目的缩小比例，默认为1，空间不足等比例缩小

flex-basis: <auto或px>    //在分配多余空间之前，项目占据主轴的空间

flex: <flex-grow> , <flex-shrink> , <flex-basic> 默认值为0 1 auto

flex: auto ==> flex: 1 1 auto; flex: none ==> flex: 0 0 auto;

align-self: auto | flex-start | flex-end | center | baseline | strech // 允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性

四、图解