今天完成的事情：

开始task5。

会运用flex的一些布局方式。

知道了怎样固定header,footer,且main可以自适应滚动。

知道了怎样用border-radius把头像做成圆形。

明天计划的事情：继续task5。

遇到的问题：flex布局相关问题。各种调试。

收获：

笔记如下；

1.flex.

为了方便垂直居中。

任何一个容器都可以指定为flex布局。

.box {

display: flex;

}

行内元素也可以使用flex布局。

.box {

display: inline-flex;

}

webkit内核的浏览器，必须加上-webkit前缀。

.box {

display: -webkit-flex;

display: flex;

}

注：设为flex布局以后，子元素的float,clear,vertical-align属性将失效。

2.flex的属性。

1）flex-direction.

决定方向。值：row(默认，行),row-reverse,column,column-reverse.

2）flex-wrap.

决定换行。值：nowrap(默认，不换行)，wrap(换行)，wrap-reverse(换行，第一行在下面。)

3）flex-flow.

上面两个属性的简写形式，默认为row nowrap.

4）justify-content.

决定水平对齐。值：flex-start(默认，左对齐)，flex-end,center,space-between,space-around.

5）align-items.

决定竖直对齐。stretch(默认，自动填满)

6）align-content.

3.项目的属性。

order,flex-grow,flex-shrink,flex-basis,flex,align-self.

这6个属性设置在项目上。

order.定义项目排列顺序。数值越小，排列越靠前。

flex-grow.定义项目的放大比例。

flex-shrink.缩小。

flex-basis.

flex.以上三个的简写。