今天完成的任务，CSS3的Flexbox（弹性盒布局模型）以及适用场景？与任务8第二张图，页头部分。

遇到的问题，做页头部分的时候的媒体查询遇到了问题，给要隐藏的盒子模型设置flex，发现我要隐藏的东西，在1000px左右的时候，dispaly：none就失效了。我开始觉得我的媒体查询写的有问题，但是去掉了flex之后，发现媒体查询，可以生效的。按理说一个盒子也可以设置flex的。毕竟我设置的只是让盒子去居右。问，让把盒子隐藏了，媒体查询dispaly：bolck。但是我在盒子里面加入了flex啊，如果去这么用媒体查询。flex就会被隐藏掉了。

最后解决方案：设置文字居右。不适应flex，布局显示正常。但是还是有点困惑。

收获，讲了一次小课堂发现对flex布局的理解更深了，之前不知道的知识，也很清晰。昨天不懂的关于栅格系统的列分配也完全弄清楚了原因所在。

明天计划任务8，第三张写完。

小课堂讨论

   flex布局的时候，默认方向是什么？

     flex布局中，默认方向居左。

   如何在flex中实现垂直居中？

   dispaly：flex

   align--ltems-center

   flex布局中，盒子模型文字溢出的解决方式？

 overflow:hidden;    溢出的部分隐藏。  

text-overflow:ellipsis;  文本溢出的显示省略。   

  white-space:nowrap    强制文本不换行。