手机端flex布局

Strive https://caniuse.com 查看css某个属性，兼容情况

 

传统的(盒子模型)

盒子模型：
box-sizing:content-box 平时普通盒子模型，padding，border,盒子会变大(向外扩展)

box-sizing:border-box  盒子模型 padding border,盒子模型不变大(向内扩展)

 

flex布局 

父级  display:flex;

            添加浏览器前缀 -webkit ,真实工作，postCss插件，自动添加浏览器前缀

            如果用了弹性布局，子元素，不需要浮动，float.

           flex-direction(排列方式):row(横向)，row-reverse(横向翻转)，column(纵向)，row-reverse(纵向翻转)

           justify_content(子元素水平排列方式):center(居中),flex-start:(居左) ,flex-end:(居右) ,space-between(两端对齐),space-around(拉手分布)

          align-item:(子元素垂直排列方式):center(居中),flex-start:(居上) ,flex-end:(居下)

          align-content(多行垂直排列方式): center(居中),flex-start:(居上) ,flex-end:(居下)

          flex-wrap(包裹方式):nowrap(不换行)，wrap(换行)

          flex-flow:<flex-direction><flex-wrap>缩写 排列方式和包裹方式

 子级

         flex:1(平分父级宽度) 系数:父级平分后,每个占的比例，子元素在划分父元素宽度，先抛出固定宽度后再平分系数

         flex-grow:1 ，定义子元素放大比例，换行后的子元素占满屏幕

          align-self：其实就是单个用来覆盖父级的align-item的方式

         order:0 用来规定子元素的排列顺序。数值越小，越靠前，默认值是0；