一、小兔鲜-确认订单
1.先观察整体页面布局情况，再逐步进行分析（大体部分由五个大盒子盒子组成）
①第一个盒子：内部布局为三部份构成，利用flex布局，两边可用水平对齐方式space-between，观察父级盒子内可设置内边距，右边子元素可用矢量图知识点（准备矢量图素材），其余通过pxcook设置字体样式大小及垂直对齐方式调整即可。
②第二个盒子：内部布局为三部份构成，利用flex布局，两边可用水平对齐方式space-between，观察父级盒子内可设置内边距，（注意子元素图片为二倍），中间部分上中下三个结构，再次利用flex布局并改变主轴对齐方式flex-direction：colum。，其余通过pxcook设置字体样式大小及垂直对齐方式调整即可。（ps：右边X1部分若不能通过垂直对齐方式达到预期效果，可用定位进行调整。）
③第三-四个盒子：内部布局为三部分部分构成，利用flex布局并改变主轴对齐方式flex-direction：colum，并分析到上下结构中外细内粗，可知通过justify-content：around进行布局，每行为左右靠边，再其父级设置display：flex，justify-content：space-between完成布局，其余通过pxcook设置字体样式大小及垂直对齐方式调整即可。
④第五个盒子：内容由两部分组成，利用flex布局，两边可用水平对齐方式space-between，观察父级盒子内可设置内边距，其余通过pxcook设置字体样式大小及垂直对齐方式调整即可。
二、小兔鲜-个人中心
1.先观察整体页面布局情况，再逐步进行分析（以最大同高单位确认，由左右两个大盒子构成）
主体部分：
①第一部分在第一个大盒子内，第二、三、四、五部分在第二个大盒子内，其中，第二个大盒子由从上到下四个部分构成
②第一个大盒子和第二个大盒子为水平左右对齐方式justify-content：space-between。
③第二个大盒子内部四个部分从上至下，因此，利用flex布局，通过利用flex布局并改变主轴对齐方式flex-direction：colum，几个部分之间且有均匀间隔，上下无间距，在利用justify-content：space-between达到预期效果
④设置版心
内部细节部分：
第一部分：
①上下结构，两部分(改变主轴为Y轴)，上面部分设置主轴对齐变化为Y轴，下面部分利用dl标签，注意内容间的间隔
第二部分：
①左右结构，且为justify-content：space-evenly（水平均匀），后调节垂直对齐方式
②两部分中间有线间隔，通过设置伪元素处理
第三部分：
①上中下结构(改变主轴为Y轴)，上面为justify-content：space-between，中间、下面为三部分构成，包含有需要设置主轴变为Y轴，大体可设置flex:1,
第四、五部分：
①上下结构，上面为justify-content：space-between，下面justify-content：space-evenly
三、flex课堂总结
1 默认请求下 行内元素 span 加宽和高度无效
2 给父盒子设置了的flex布局
1 子元素 子项 直接加宽度和高度
2 子元素存在默认的宽度和高度
1 宽度 等于内容撑开
2 高度 高于父项的高
3 子元素
使用浮动无效
使用 定位 margin变换 有效
3 父项
设置主轴的方向 水平
flex-direction:
1 column; 列 垂直
2 row 默认值 行
justify-content:
1 flex-start;
2 flex-end;
3 center;
4 space-evenly
5 space-between
6 space-around
设置换行
1 flex 默认不会换行
flex-wrap: wrap;
设置侧轴对齐方式-单行 垂直
align-items
1 flex-start;
2 flex-end;
3 center;
设置侧轴对齐方式-多行 垂直
align-content
1 flex-start;
2 flex-end;
3 center;
4 space-evenly
5 space-between
6 space-around
子项
设置 子项占父项宽度的比例
flex: 1
设置 子项在侧轴上的对齐方式
align-self
1 flex-start;
2 flex-end;
3 center;
四、vw、vh单位
单位：px em % vw
①vw 是相对长度单位 （都是要找到参照物的） 相对于屏幕的宽度
②100vw = 屏幕的宽度 = viewport width 视口的宽度
③100vh = 屏幕的高度 = viewport height 视口的高度
