flex骰子布局

实验目的及要求：

补全 index.html 文件空缺的 css 代码。
骰子 1：使用 justify-content 与 align-items 属性实现。
骰子 2：使用 justify-content、flex-direction 与 align-items 属性实现。
骰子 3：使用 justify-content、align-self 与 align-items 属性。
骰子 4、5、6、7、9 布局结构类似：使用 justify-content、align-self、 flex-direction 与 align-items 属性实现。
骰子 8：使用 justify-content、flex-wrap、flex-basis 与 align-items 属性实现。

算法或原理分析（实验内容）：

① justify-content:
flex-start(默认值)：左对齐
flex-end:右对齐
center：居中
space-between:两端对齐，元素之间的间隔都相等
space-around:每个元素两侧的间隔相等
② align-self：
auto:默认值，元素继承父元素的align-item值
center:元素位于容器中心
flex-start:元素位于容器的开头
flex-end:元素位于容器的结尾
③ flex-direction：
row(默认值):主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
④ align-items
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
stretch(默认值):如果未设置高度或设置为auto，将占满整个容器的高度
baseline:元素的第一行文字的基线对齐

程序代码或实现过程：





    
    
    
    



    
    

        

    
    
    

        

        

    
    
    
   //分别命名为a，b，c进行调用