CSS弹性盒子flex时间:2019-08-07    作者:panda    访问:268










  • display    指定 HTML元素盒子类型。
    flex-direction    指定了弹性容器中子元素的排列方式
    justify-content    设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
    align-items    设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
    flex-wrap    设置弹性盒子的子元素超出父容器时是否换行。
    align-content    修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
    flex-flow    flex-direction 和 flex-wrap 的简写
    order    设置弹性盒子的子元素排列顺序。
    align-self    在弹性子元素上使用。覆盖容器的 align-items 属性。
    flex    设置弹性盒子的子元素如何分配空间。

    align-content 属性
    align-content 属性用于修改 flex-wrap 属性的行为。用于设置各个行的对齐
    stretch :各行将会伸展以占用剩余的空间,默认值
    flex-start:各行向弹性盒容器的起始位置堆叠
    flex-end: 各行向弹性盒容器的结束位置堆叠
    center :各行向弹性盒容器的中间位置堆叠
    space-between:各行在弹性盒容器中平均分布
    space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半

    flex-wrap 属性
    flex-wrap 属性用于指定弹性盒子的子元素换行方式。
    nowrap:默认,弹性容器为单行,该情况下弹性子项可能会溢出容器。
    wrap :弹性容器为多行,该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
    wrap-reverse :反转 wrap 排列

    align-items 属性
    align-items 属性设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
    flex-start:元素位于容器的开头
    flex-end:元素位于容器的结尾
    center:元素位于容器的中心
    baseline:元素位于容器的基线上
    stretch:默认值。元素被拉伸以适应容器

    justify-content 属性
    justify-content属性表示内容对齐,应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)
    flex-start:项目位于容器的开头,默认值。
    flex-end:项目位于容器的结尾
    center:项目位于容器的中心
    space-between:项目位于各行之间留有空白的容器内
    space-around:项目位于各行之前、之间、之后都留有空白的容器内


    flex-direction属性
    flex-direction 属性指定了弹性子元素在父容器中的位置
    row:横向从左到右排列(左对齐),默认的排列方式
    row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面)
    column:纵向排列
    column-reverse:反转纵向排列,从后往前排,最后一项排在最上面

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>骰子</title>
    </head>
    <body>
    
        <style>
    .box {
        height: 200px;
        width: 200px;
        position: relative;
        transform-style: preserve-3d;
        animation: zhuan 500s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-play-state: running;
        margin: 0 auto;
        top: 100px;
    }
        .box div {
        display: flex;/*设置容器为弹性盒子*/
        background: #f8f8f8;
        width: 200px;
        height: 200px;
        position: absolute;
        border: 1px solid #b6acac;
        flex-direction: column;/*设置主轴为纵向向下*/
        justify-content: space-around;/*每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/
        border-radius: 20px;/*边框圆角*/
        box-shadow: 0px 0px 10px #000;/*边框阴影*/
    }
    
    /*rotatey(90deg)围绕y轴旋转90度*/
    /*translatez(-100px)像块的正面移动-100px*/
            .box div.son1{
                transform:translatez(100px);
                justify-content: center;/*设置子元素的主轴上的对齐方式为居中*/
                align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
            }
            .box div.son2{
                transform:rotatey(90deg) translatez(100px);
                align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
            }
            .box div.son3{
                transform:rotatex(90deg) translatez(100px);
                align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
            }
            .box div.son4{
                transform:rotatex(90deg) translatez(-100px);
            }
            .box div.son5{
                transform:rotatey(90deg) translatez(-100px);
            }
            .box div.son6{
                transform:translatez(-100px);
            }
            @keyframes zhuan{
                0%{
                    transform:rotatex(0deg) rotatey(0deg) rotatez(0deg);
                }
                100%{
                    transform:rotatex(46000deg) rotatey(100000deg) rotatez(50000deg);
                }
            }
            .box span {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: black;
        box-shadow: 0px 0px 10px #080808;
    }
            .box span.red{background: red;}
            .box div.son3 span:nth-of-type(1){align-self: flex-start;/*设置自己的对齐方式,排列的起点*/}
            .box div.son3 span:nth-of-type(3){align-self: flex-end;/*设置自己的对齐方式,排列的终点*/}
            li{display: flex;/*设置容器为弹性盒子*/}
            .box div.son6 li,.box div.son5 li,.box div.son4 li{justify-content: space-around;/*每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/}
            .box div.son5 li:nth-of-type(2){justify-content: center;}
            .box:hover{animation-play-state:paused;/*停止动画*/}
        </style>
        <div class="box" style="transform:rotatex(2250deg) rotatey(1350deg) rotatez(1800deg);transition: transform 5s;transition-timing-function: cubic-bezier(1,0,0,1);">
            <div class="son1">
                <span class="red"></span>
            </div>
            <div class="son2">
                <span></span>
                <span></span>
            </div>
            <div class="son3">
                <span></span>
                <span class="red"></span>
                <span></span>
            </div>
            <div class="son4">
            <li>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
            </li>
            </div>
            <div class="son5">
                <li>
                <span></span>
                <span></span>
            </li>
                <li>
                    <span class="red"></span>
                </li>
                <li>
                <span></span>
                <span></span>
            </li>
            </div>
            <div class="son6">
            <li>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
            </li>
        </div>
        </div>
    </body>
    </html>