今天完成的事情：首先是task5任务完成了，总体上来说还算顺利，就是弹性盒子flex这里卡了一下。

说下我完成任务5的经历：

1.页面的最上面个人主页几个字，水平且垂直居中，左边一个箭头靠左边且距离左边有20个像素左右的距离，这个图片的定位和位子的居中，很简单前面已经有过介绍了，这里就不废话了。

2.在往下面就是一个大的背景图片，上面有一个头像，头像左边是两排文字介绍。其实做法大概都差不多，div给个背景图片，在给div一个固定高度宽度100%，接下来就是头像图片的定位，和文字的对齐问题，和header部分用的方法基本差不多。

3.接下来是类似表格形式的一排文字介绍。我觉得用表格比较麻烦，我用的是div+span来排的，没一行文字都是div+span标签来完成的，注意：div的宽度要用auto，如果宽度用100%的话横向有可能会出现滚动条的情况，右边会多出一些宽度，具体为啥目前还没有搞明白，反正我是把宽度换成auto之后就没有这个问题了。值得注意的是，位子后面的竖线和文字底部的横线，用border来实现很方便，间距就用margin和padding来控制就ok了，还有设置下文字的颜色，字体的大小，这个地方也很简单。

4.重点来来了就是这个地方卡了我快两天时间了，就是列表最下面自我介绍的那一栏内容。先分析下设计图片，自我介绍和一条竖线在左边，右边是一排介绍文字。调整浏览的宽度让它边窄，右边的介绍内容由于文字比较多，可能会变成两行或者三行，这样一来这一栏的高度就会变高，但布局依旧不变，自我介绍和一条竖线依然在左边上下左右居中，右边的文字虽然行数变多了，布局依旧一样上下左右居中。

一开始没想到flex，我用的float+white-space，有点想当然了，解决不了问题，调来调去依旧是各种乱。

群里问里师兄，师兄提到说用flex轻松解决。

下面说说flex是如何解决这个问题的：

flex也就是弹性盒子，注意在用的时候，这个元素一定要是弹性盒子的子对象，否则flex属性不起作用。

在用的时候，在所有元素的外面的div样式里面给个display:flex;，这样这个div就是一个弹性盒子了，这个div里面的所有元素都可以使用flex的属性。

贴上我的代码：

<div class="list_js_div">
    <span class="list_js_span">自我介绍</span><span>可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人</span>
</div>

.list_js_div {
       width: auto;
    height: auto;
    color: #000;
    font-size: 15px;
    line-height: 23px;
    margin: 10px 10px 80px 10px;
    padding: 0 10px 10px 10px;
    border-bottom: 2px solid #BAB9BF;
    display: flex;
    align-items: center;

}
.list_js_span {
       color: #BAB9BF;
    border-right: solid 2px #BAB9BF;
    margin-right: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

还有一个要注意的点就是自我介绍不设宽度或者宽度设auto,那就加上whit-space强制不让换行，一样解决问题。

明天计划的事情：计划嘛，当然是学更多的东西，具体就是深入研究一下flex弹性盒子这个东西，开始准备做task6.

遇到的问题：有个问题值得说一下，那就是自我介绍的span标签和后面介绍内容的span标签，如果不放在一行上，页面上自我介绍后面会出现一个空白的地方，放在一行就没有了，后来调了很多次代码之后。不放在一行上也没有空白的地方出现了，不知道哪儿的问题，现在又正常了。就这个任务来说，目前木有遇到什么特别难的问题。

收获：收获不算很多，用的大部分都是以前学的东西，就是对flex有了初步的了解，接下来准备深入学习学习。