今天完成的事情：一、完成task5。

二、学习flex布局的相关内容。

六种属性可以设置在容器上，它们分别是：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

1、flex-direction: 决定主轴的方向(即项目的排列方向)

.container {

    flex-direction: row | row-reverse | column | column-reverse;

}

2、flex-wrap: 决定容器内项目是否可换行

默认情况下，项目都排在主轴线上，使用 flex-wrap 可实现项目的换行。

.container {

    flex-wrap: nowrap | wrap | wrap-reverse;

}

3. flex-flow: flex-direction 和 flex-wrap 的简写形式

.container {

    flex-flow: <flex-direction> || <flex-wrap>;

}

4. justify-content：定义了项目在主轴的对齐方式。

.container {

    justify-content: flex-start | flex-end | center | space-between | space-around;

}

5. align-items: 定义了项目在交叉轴上的对齐方式

.container {

    align-items: flex-start | flex-end | center | baseline | stretch;

}

6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用.container {

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

有六种属性可运用在 item 项目上：order、flex-basis、flex-grow、flex-shrink、 flex、align-self。

1、order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

.item {

    order: <integer>;

}

2、flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。

.item {

    flex-basis: <length> | auto;

}

3、flex-grow: 定义项目的放大比例。

.item {

    flex-grow: <number>;

}

4、flex-shrink: 定义了项目的缩小比例。

.item {

    flex-shrink: <number>;

}

5、flex: flex-grow, flex-shrink 和 flex-basis的简写。

.item{

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

} 

6. align-self: 允许单个项目有与其他项目不一样的对齐方式。

.item {

     align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

相关资料：https://zhuanlan.zhihu.com/p/25303493

三、CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)

资料来源：https://blog.csdn.net/ion_L/article/details/82464548

明天计划的事情： 进入task6，整理task5用到的知识。

遇到的问题：1、背景图片使用模糊效果(毛玻璃效果)， filter: blur(5px); 在IE浏览器不兼容。

收获： 进一步了解了flex布局，之后尝试多使用熟悉下。