初识弹性盒子

1.介绍

弹性盒子就是当页面需要适应不同的尺寸以及设备类型时确保元素布局恰当的布局方式，未来还有网格布局但目前兼容性不好 display:grid

2.移动端的补充

再次强调 在移动端所有有尺寸的地方推荐单位 rem

meta不能忘记写

 calc（）

比如定义750 就可以引用这种方法

html{

font-size: calc(100vw / 750 * 100)

}

3.弹性盒子的属性

首先定义弹性盒子

 webkit内核的浏览器，必须加上-webkit-前缀

当存在弹性盒子的时候 子元素里面的float clear tical-align属性将会失效

ustify-content属性定义了项目在主轴上的对齐方式.

 

Justify-content: space-evenly 没两个项目之间的距离与边缘项目距离容器边缘相等  兼容性不好

交叉轴对齐方式

 

 注意这里的 flex-direction 可以定义主轴方向

换行方式 flex-wrap 默认nowrap不换行（wrap换行）

换行之后交叉轴变成 align-content align-content属性定义了多根轴线的对齐方式

弹性盒子特性：当容器空间不足时 里面的项目会等比例缩小 有剩余的话不放大