今天完成的事情

任务五

明天计划的事情

继续刷任务

遇到的问题

目前的做法是  

首先完全按照设计图像素布局   布局完成后所有像素值按比例缩一半   然后再对比示例gif图调整

总感觉有些怪  这样做对么

收获

发现 flex 大杀器  代码重构使用 flex 重新布局

首先定义了  display: flex 的容器  称之为flex容器   

容器下的子元素自动成为其成员 item

子元素按照指定的主轴方向进行排列

flex-direction  row 主轴左往右 row-reverse 右往左  column 上往下  column-reverse 下往上

子元素默认不换行

flex-wrap  nowrap 不换行等比缩放(溢出overflow)  wrap 换行  wrap-reverse 

子元素排列方向(direction)和换行(wrap)可以通过 flex-flow 这一个属性同时定义

justify-content 子元素主轴方向上的排列方式 以主轴方向右往左举例(flex-direction: row-reverse)  

justify-content: flex-start  元素从右往左排列    flex-end 相反  center  居中  flex-around 等距间隔 flex-space 等距间隔但是左右贴着边 

align-items  子元素在交叉轴上的排列方式  属性同 justify-content