简单的理解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
总结
弹性盒子能够很方便的实现,水平和垂直的排列,等分,不等分等操作,唯一的不足之处就是兼容不好