今天完成的事情：任务八的第一个页面总算做完了。明天开始第二个页面的制作。头部都一样的 打算直接引用。

明天计划的事情：明天打算做任务八的第二个人 第三个页面。框架和媒体查询已经会运用了。

 
遇到的问题：昨天的问题 阴影显示不出来 。这次我设置了个优先级z-index。就可以了。艰辛的任务八 框架属性一个不了解，基本靠摸索，响应式和pc一起写有点麻烦。

收获：

弹性容器

.d-*-flex 根据不同的屏幕设备创建弹性盒子容器

.d-*-inline-flex 根据不同的屏幕设备创建行内弹性盒子容器

方向

.flex-*-row 根据不同的屏幕设备在水平方向显示弹性子元素

.flex-*-row-reverse 根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐

.flex-*-column 根据不同的屏幕设备在垂直方向显示弹性子元素

.flex-*-column-reverse 根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反

内容对齐

.justify-content-*-start 根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)

.justify-content-*-end 根据不同屏幕设备在尾部显示弹性子元素 (右对齐)

.justify-content-*-center 根据不同屏幕设备在 flex 容器中居中显示子元素

.justify-content-*-between 根据不同屏幕设备使用 "between" 显示弹性子元素

.justify-content-*-around 根据不同屏幕设备使用 "around" 显示弹性子元素

等宽

.flex-*-fill 根据不同的屏幕设备强制等宽

扩展

.flex-*-grow-0 不同的屏幕设备不设置扩展  

.flex-*-grow-1 不同的屏幕设备设置扩展  

收缩

.flex-*-shrink-0 不同的屏幕设备不设置收缩  

.flex-*-shrink-1 不同的屏幕设备设置收缩  

包裹

.flex-*-nowrap 不同的屏幕设备不设置包裹元素

.flex-*-wrap 不同的屏幕设备设置包裹元素

.flex-*-wrap-reverse 不同的屏幕设备反转包裹元素

内容排列

.align-content-*-start 根据不同屏幕设备在起始位置堆叠元素

.align-content-*-end 根据不同屏幕设备在结束位置堆叠元素

.align-content-*-center 根据不同屏幕设备在中间位置堆叠元素

.align-content-*-around 根据不同屏幕设备，使用 "around" 堆叠元素

.align-content-*-stretch 根据不同屏幕设备，通过伸展元素来堆叠

元素对齐

.align-items-*-start 根据不同屏幕设备，让元素在头部显示在同一行。

.align-items-*-end 根据不同屏幕设备，让元素在尾部显示在同一行。

.align-items-*-center 根据不同屏幕设备，让元素在中间位置显示在同一行。

.align-items-*-baseline 根据不同屏幕设备，让元素在基线上显示在同一行。

.align-items-*-stretch 根据不同屏幕设备，让元素延展高度并显示在同一行。

单独一个子元素的对齐方式

.align-self-*-start 据不同屏幕设备，让单独一个子元素显示在头部。

.align-self-*-end 据不同屏幕设备，让单独一个子元素显示在尾部

.align-self-*-center 据不同屏幕设备，让单独一个子元素显示在居中位置

.align-self-*-baseline 据不同屏幕设备，让单独一个子元素显示在基线位置

.align-self-*-stretch 据不同屏幕设备，延展一个单独子元素