今天完成的事情：

明天计划的事情:

遇到的问题：

flex实现九宫格布局：给盒子使用vw，盒子大小并非依据所调试浏览器界面，而是以所使用的浏览器界面为基准；

宽高使用rem值无法自适应；

使用width百分比，使用padding值撑起盒子高度，盒子内文字占据高度，无法实现宽高相等。

最后使用width百分比，height为vw高度，限定max-height值，才完成布局。

设置盒子display:none;当max-width：768px；时display:block;然而width为768时盒子未显示。

不知道是不是哪里代码冲突了。

收获：

编辑bootstrap.css。理解flex-grow，flex-shrink，flex-basis属性。

/*flex是flex-grow、flex-shrink和flex- basis组合的简写
flex-grow: 值只能为数字，不能为单位和百分数；设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素是否索取父元素的剩余空间，默认值0，值大于0表示索取剩余空间。
flex-shrink：值只能为数字，不能为单位和百分数；设置当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。默认值1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。
flex- basis： 值不能为数字，可以为单位和百分数；设置元素的宽度，如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉，默认值0。
三个属性值顺序可以改变
匹配优先级：flex-grow > flex-shrink > flex- basis*/

虽然flex-basis的值可以覆盖width，但是min-width和max-width可以限制flex-basis的值。width属性只是一个当flex-basis没有被设置时的回退选项。min-width和max-width则是flex-basis的下限和上限。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

给col设置width：100%；作用是将列拆分为flexbox中的新行。

给col设置min-height：1px；的作用是当col不包含文本时，不会发生水平折叠的现象。

webstorm中点击View——Recent-Changes——Deleting可以从中找回被误删的文件。