今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1.任务五完成啦，撒花

现在放到最小是这个样子的。

2.任务五的布局先放弃table，改用span，用float布局写了一遍，发现最后一行怎么都没法做到自动换行并且外框尺寸匹配还垂直居中，查了一下改用了flex布局，很轻松的就做到了……

3.任务四昨天改完了不知道为什么没提交上……刚才应该提交上了。

明天计划的事情：（一定要写非常细致的内容） 

1.一定要学bootstrap！这句话我好像说了好几天了，没想到任务五那么麻烦（特指用float布局）。

遇到的问题：（遇到什么困难，怎么解决的） 

1.问题：昨天师兄发现的下面的按钮不自适应

   解决：按钮的width设置小了1rem，因为太大了自动换行了。

2.问题：在flex的学习开始，机械的使用了父元素display:flex;子元素flex:1;这个方式，发现下面的两栏都在跟着跑，而不是我想要的左栏固定右边弹性

   解决：给左边的设置了一个固定的尺寸，并且去掉了flex属性，只让右边弹性扩张。

3.问题：最后一行右栏在尺寸小的时候会直接插到左栏里和左栏字符重叠而不是换行。

   解决：出现这个问题的我推测是右栏的尺寸固定为内容的大小，不会随着整体变化缩小；所以给右栏设置了一个很小的尺寸，保证在320px的屏幕上也能还原布局，而在更大的屏幕上因为属性为flex:1;所以会弹性展开，同时把height的值设为auto，为了避免紧贴再给整体相应的padding和margin，就能完成这个布局了。

收获：（通过今天的学习，学到了什么知识）

1.学会了flex布局的相关知识，知识来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，感谢阮一峰老师。