今天完成的事：

完成了任务三的界面布局，学会如何使用flex布局。

使用flex确实要简单很多，总结一下：

Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局，采用 Flex 布局的元素，称为 Flex 容器，它的所有子元素

自动成为容器成员，称为 Flex 项目，输入display: flex;就可以使用flex布局。

main axis（水平的主轴）；main start（主轴开始的位置）

cross axis（垂直的侧轴）；main end（主轴结束的位置）

cross start（侧轴开始的位置）；cross end（侧轴结束的位置）

flex-direction:row（布局为一行，从start开始排）；flex-direction:row-reverse (布局为一行，从end开始排)

flex-direction:column (布局为一列，从start开始排)；flex-direction:column-reverse (布局为一列，从end开始排)

flex-wrap：nowrap (不换行，在一行显示）；flex-wrap:wrap (内容超过后换行)

flex-wrap:wrap-reverse (换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

justify-content（主轴对齐方式）；align-items（交叉轴对齐方式）align-content （多根轴线对齐方式）

明天计划的事：

（真）着手任务四，和了解css相对定位和绝对定位。

遇到的问题：

使用盒子延长边框宽度来达到布局，但变化屏幕大小会把周围内容挤开。

解决办法就是只延长内容宽度，变化屏幕大小不会破坏布局。

使用浮动达到内容右显示，问题就是字体不在一个水平线上（完全不清楚到底是什么问题)

解决办法就是抛弃浮动使用flex布局（确实很方便）

还有就是代码规范问题，通过查找资料借鉴样式完善了规范（当前任务代码）

收获：

了解了flex布局，明白了如何使用。完成任务三积累了一点经验。