flex布局项目总结

flex圣杯布局案例：B站pink老师视频：flex布局：09：常见子项属性

1.flex布局设置在父元素身上；
2.flex布局父项属性：flex-direction:设置主轴方向：默认主轴方向是x轴方向，水平向右；默认侧轴方向是y轴方向，垂直向下；

移动端京东M站项目总结：在移动端用弹性盒模型的时候，不要把宽度写死，最好是采取百分比的形式；高度可以固定；项目写好之后，在浏览器里面手机模拟手机中测试，看看320像素的手机是否会出现异常的情况；

弹性布局：上面排布：上面是图标，下面是文字，居中---->做法：整个是一个a标签，
给a设置display:flex; flex-direction: column;align-items: center;
弹性盒模型：display:flex；
主轴在垂直方向：flex-direction: column;
侧轴居中：align-items: center;
实例在京东M站的nav导航，毛妮大衣哪一板块；视频讲解在b站pink老师的flex布局中17：携程网首页07_部分；

里面放两个span标签，上面span标签放图片，设置宽度和高度(比如28*28)。在第一个标签里面设置背景图片，并且背景图片按照美工设计的进行放大或者缩小（一般缩小1/2 或 1/3）用弹性布局，先让主轴为y方向，再在副轴方向居中，单行用align-item:center；

移动端弹性盒模型携程项目总结：
css3盒子模型：怪异盒模型；
弹性布局配合css3怪异盒模型来还用：box-sizing:border-box；
-n+2 前两个选择器；
头部区域的居中对齐：transform:tranlatex（-50%）在web端，不知道自己宽度的情况下，利用c3水平居中，定位；

a里面套img，让img的宽度等于a宽度的100百分之；

影子：box-shadow:水平移动 垂直移动 。模糊程度 颜色rgba
0 2 4 rgba（0，0，0，.2）；