今天完成的事情： 

上午开始主体部分，完成主体头部；

下午完成小课堂，小课堂后续的视频上传、文件传入公共库、发布csdn博客；

明天计划的事情：

完成小课堂剩余相关事情

完成页面2

遇到的问题：

主体部分准备使用flex布局完成，第一次使用，不能建立属性与效果之间相应的联系，让人抓狂。先把flex的笔记放在下面。

5个主要属性

1 display:flex

#container {    display:flex;
}

将容器变成弹性容器，形成弹性上下文

2 flex-direction

弹性盒模型有两个轴：主轴和交叉轴，默认情况下主轴是row，可以改变主轴，
flex-direction:column|row-reverse|column-reverse
主轴自身改变
flex-wrap
默认情况下，项目排在主轴上，flex-wrap属性定义项目如何换行
flex-wrap:nowrap|wrap|wrap-reserve
flex-flow flex-direction和 flex-wrap 简写形式，默认值：row nowrap
flex-flow:<flex-direction>||<flex-wrap>

3 justify-content

控制元素在主轴上的对齐方式
justify-content:flex-start|flex-end|center|space-between|space-around
space-between使每个块之间产生相同大小的间隔，容器和块之间不会
space-around每个块两边产生相同大小的间隔，最外层块和容器之间相同
justify-content沿主轴工作， flex-direction改变主轴

4 align-items

align-items作用于交叉轴
align-items:flex-start|flex-end|center|stretch|baseline
stretch：每一项占满交叉轴，必须将高度设置auto，否则高度覆盖stretch
baseline：按段落标签第一行文字底部对齐，没有文字每个块底部对齐
align-content 定义多行对齐方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch

项目属性

1 order

定义项目排列顺序，数值越小排列越靠前，默认为0
order：integer，可取负值

2 flex-grow

定义放大比例，默认为0，如果存在剩余空间，也不放大。 如果所有项目的flex-grow为1，等分剩余空间；一个flex-grow为2，其它为1，前者占据剩余空间为2倍。即按比例分配剩余空间。

3 flex-shrink

定义项目缩小比例，默认为1，即空间不足项目将缩小
flex-shrink：0 不缩小；负值无效

4 flex-basis

定义项目占据主轴空间，浏览器据此计算剩余空间。默认auto，本来大小。
flex-basis:length|auto
flexflex-grow、 flex-shrink 、flex-basis的简写，默认值为0 1 auto
有两个快捷值auto（1 1 auto） 和 none（0 0 auto）

5 align-self

align-self设置特定元素的对齐方式，覆盖align-item样式

收获：

之前全部使用传统布局，没有使用过flex，转变的过程有点痛苦。还有对于页面2主体部分自己的理解可能存在偏差。

只能多做尝试，增加印象建立flex表现的联系。

任务13

开始时间：20180517

预计结束时间：20180521

http://task.jnshu.com/zentao/project-task-629.html