Flex弹性布局简单理解

简单的理解flex弹性布局

基本概念

弹性盒子：

该图片引用于：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

开启弹性盒子

display:flex 或 display:inline-flex

Flex容器的属性

flex-direction flex item排列的方向
flex-wrap flex item是否自动换行
flex-flow flex-direction和flex-wrap的简写，默认是row nowrap
justify-content 项目水平方向的对齐方式
align-items 项目垂直方向的对齐方式，可实现多行文本的垂直居中
align-content 多个项目垂直方向的对齐方式

都是简单的理解，更专业的理解请看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex项目的属性

order 定义项目的显示顺序
flex-grow 定义项目放大方式
flex-shrink 定义项目缩小方式
flex-basis 请看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex 请看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
align-self 请看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

总结

弹性盒子能够很方便的实现，水平和垂直的排列，等分，不等分等操作，唯一的不足之处就是兼容不好