字体引入，怪异盒模型，弹性盒子，修改主轴方向，项目对齐

 字体引入，设置阴影

 

 怪异盒模型（遵循设置的高度和宽度，变化是挤压内容）box-sizing:border-box;

刚开始是这样的，现在加了怪异和模型后就好起来了

 

 加了怪异模型后：

 

 弹性盒子

 使用弹性盒子前

 

 

 使用弹性盒子后

弹性盒子，设置主轴方向flex-direction:是横着的，还是竖着的

flex-direction:

 主轴侧轴的对齐方式（靠哪边）justify-content

 

 距离环绕是盒子周边距离相等

 调整侧轴align-items:不支持justify-content: center和align-items: center;两个属性
 

 折行（flex-wrap:wrap）没加折行前后对比

前

 后  加入弹性盒子的折行

 控制折行后行间距align-content:

 

 

 项目-对齐方式(针对于侧轴) align-self:

 

 

 

order：排列权重

权重越大，排列顺序越靠后。

 

 项目-剩余宽高flex：值是设置的比重  此款是共12的空间占比。如果没有设置，flex有值的沾满