Flex布局（弹性盒子布局）

Flex布局（弹性盒子布局）

详情：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

开启 flex 布局：display:flex;

行内元素开启flex布局：display: inline-flex;

容器属性

• flex-direction 决定主轴方向
• flex-wrap 定义项目在一条主轴上排列不下该如何排列
• flex-flow 是flex-direction和flex-wrap的复合写法
• justify-content 定义项目在主轴上的对齐方式
• align-items 定义项目在交叉轴上的对齐方式
• align-content 定义多条轴线的对齐方式

项目属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小
• flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 后两个属性可选，该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
• align-self 允许单个项目有与其他项目不一样的对齐方式