弹性布局

移动布局
设备: 手机 & ipad
系统: 安卓 & ios
内置: 安卓系统的内置浏览器是谷歌 ios内置safari浏览器 他们的内核都是webkit 不考虑兼容性，需要考虑的是安卓和ios的区别

弹性布局

　　　*分两部分 分别是弹性父级 弹性子元素
　　　*给父级设置display: flex; 或者 display: inline-flex;
　　　　1.flex-direction: row | row-reverse | column | column-reverse;
　　　　*属性指定了弹性子元素在父容器中的位置

　　　　　　 row: 横向从左到右

　　　　　　

　　　　　　row-reverse: 反转横向排列

　　　　　　

　　　　　　column: 纵向排列

　　　　　　

　　　　　　column-reverse: 反转纵向排列

　　　　　　

 

　　　　2.justify-content: flex-start | flex-end | center | space-between | space-around;
　　　　*内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

　　　　　　flex-start: 弹性项目向行头紧挨着填充。这个是默认值

　　　　　　

　　　　　　flex-end: 弹性项目向行尾紧挨着填充

　　　　 　　 

　　　　　　center: 弹性项目居中紧挨着填充

　　　　　　 

　　　　　　space-between: 弹性项目平均分布在该行上

　　　　 　　 

　　　　　　space-around: 弹性项目平均分布在该行上，两边留有一半的间隔空间