一、 Flex容器的6个属性
Flex容器的属性有6个，分别是flex-direction、flex-wrap、justify-content、ailgn-item、ailgn-content、flex-flow，将其功能和可选值整理成以下图片（偷个懒，这里就不码了）：
二、Flex容器简单案例
根据上面的整理，写了一个小小的案例，每个值都尝试以下，以便加深对Flex布局的理解。
1、 效果图
2、代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Flex容器</title><style>.container {width: 600px;height: 200px;border: 1px dashed red;box-sizing: border-box;display: flex;justify-content: space-around;/*align-items: center;*/flex-flow: row wrap;align-content: space-between;}.container > span {width: 160px;height: 30px;line-height: 30px;background-color: lightpink;text-align: center;}</style></head><body><div class="container"><span class="item">1</span><span class="item">2</span><span class="item">3</span><span class="item">4</span><span class="item">5</span><span class="item">6</span><span class="item">7</span><span class="item">8</span><span class="item">9</span></div></body></html>`
三、 首页头部作业总结
1、存在的问题
首先，我觉得最大的问题就是CSS选择器上面，一直都是使用父代选择器，而不是子元素选择器，写出来的代码不够商业化，不够规范。其次，是一些小问题。比如网站logo忘记加a标签，没有使用大的container包住三个部分等等。
2、 心得体会
我也算是带着点基础来学习的，但我还是很期待听老师授课的内容，迫不及待想收获一些我之前未曾学到过的知识，纠正我之前写那些不规范的代码风格。边看老师写代码的时候同时反思自己是怎么写的，怎么实现这个页面布局的，印象最深的就是margin-left:-30px;，知道可以设置成负的，但从未试过，也没想到可以实现这样的效果。
这几天的学习，收获得不能说算很多，但也不算少，巩固知识居多，接下来一段时间的学习才是重点，需要多花点时间，努力收获到更多的知识，不辜负这三四个月的时光。
