flex 容器布局

/* 这个是确定我们谁是主轴 */                flex-direction: row;默认为row

flex-direction: column;

            div span {                width: 150px;                margin-left: 10px;//这个决定我们的直接的距离 就是距离左侧的距离                height: 100px;                background-color: blueviolet;            }

这个是决定我们的的元素是不是会进行换行本身我们的元素要是不加上这个属性

1.我们要先确定我们的主轴之后我们才能进行确定我们的justify-content我们的这个justify-content是默认从我们的左侧开始进行排列这个属性就是分配空间的一个属性

        div {                display: flex;                width: 800px;                height: 300px;                background-color: #8A2BE2;                flex-direction: row;                /* justify-content是根据我们的主轴进行分配的  */                /* 这个默认就是 默认就是这个布局 */                /* justify-content: flex-start; */                /* 这个是和我们的刚刚那个row-reserve不一样 这个只是贴着右边对齐  */                /* justify-content: flex-end; */                /* justify-content: center; */                /* 平分剩余空间 就是把每一个空间平均分配 */                /* justify-content: space-around; */                /* 两边贴边 再分配剩余的空间 */                justify-content: space-between;                /* 但是我们要先确定好我们的主轴才行 */            }

        section {                display: flex;                width: 60%;                height: 150px;                background-color: #00FFFF;                margin: 0 auto;                /* 上下不变 左右居中对齐 */                                /* 这个是控制在侧轴方向的移动 */            }
            section div:nth-child(1) {                width: 100px;                height: 150px;                background-color: #8A2BE2;        //这个写法就是单单处理我们的一个盒子里面的第一个子盒子             }
            /* 这个是将剩余的空间全部分配给这个盒子 用flex表示所占的分数 */            section div:nth-child(2) {                /* 当这个给予一份的时候 */                flex: 1;            }
            section div:nth-child(3) {                width: 100px;                height: 150px;                background-color: #ff55ff;            }

p span {                /* margin-left: 2px; */                /* flex为我们的盒子所占的份数 其实是  */                flex: 1;                background-color: #FFE4C4;            }
            p span:nth-child(2) {                /* flex数值越大分配的大小就越大 */                flex: 3;                background-color: brown;            }

            div {                display: flex;                width: 80%;                height: 300px;                background-color: #00FFFF;                /* 这个是让我们的侧轴进行移动 但是这个就是全部移动                 但是我们不想全部进行移动 */                /* align-items: flex-end; */                /* 但是我们只是想移动一个的位置进行处理 那么就是说使用一个align-self                 就是只让一个盒子进行移动 */            }
            div span {                width: 150px;                height: 100px;                background-color: #ffaa7f;                margin-right: 5px;            }
            /* 我们需要加上我们的顺序进行处理 实现真正的 */            /* 我们最好的使用方法就是使用我们的 box就是直接进行类的封装 */            .box2 {                background-color: #A52A2A;                order: -1;            }
            div span:nth-child(3) {
                align-self: flex-end;            }