Web前端学习笔记6（transform-style，flex）

transform-style

可以在父盒子旋转的时候保持子盒子的3d效果，加在父盒子上

/* 让子元素保持3D立体空间环境 */
transform-style: preserve-3d;

flex（给父级添加）

可以让所有元素都有大小

flex-direction（改变主轴）

flex，沿主轴排列元素

默认主轴为x轴 行 row，那么y轴为侧轴，元素是跟着主轴来排列的

div{
            /* 给父级添加flex属性 */
            display: flex;
            width: 300px;
            height: 500px;
            background-color: pink;
            /* 默认主轴为x轴 行 row */
            /* flex-direction: row; */
            /* 那么y轴为侧轴，元素是跟着主轴来排列的 */
            /* 翻转 */
            /* flex-direction: row-reverse; */
            /* 将主轴改为Y轴，按y轴排列 */
            /* flex-direction: column; */
        }
        div span{
            width: 50px;
            height: 50px;
            background-color: purple;
            margin-right: 5px;
        }

justify-content（改变排列方式，都是沿着主轴）

默认为沿着主轴的排列方式，可以改为：从尾部开始排列，主轴居中对齐，平分剩余空间，先两边贴边，再平分剩余空间

        div{
            display: flex;
            width: 300px;
            height: 500px;
            background-color: pink;
            /* 为默认的主轴的排列方式 */
            /* justify-content: flex-start; */
            /* 从尾部开始排列 */
            /* justify-content: flex-end; */
            /* 主轴居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，再平分剩余空间 */
            /* justify-content: space-between; */
        }
        span{
            width: 50px;
            height: 50px;
            background-color: purple;
        }

flex-wrap（设置是否换行）

默认为不换行，所有元素会根据页面大小来强制改变原大小使其不换行

/* 设置为换行 */

flex-wrap: wrap;

        div{
            display: flex;
            width: 500px;
            height: 300px;
            background-color: pink;
            /* 默认子元素不换行，如果撞不开，会缩小子元素的宽度，放在父元素里 */
            /* flex-wrap: nowrap; */
            /* 设置为换行 */
            flex-wrap: wrap;
        }
        span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-left: 5px;
        }