display:flex属性

1.flex最常用的几种方法 ，大多数用于移动web布局  (flex的更多用处以后再学习补上)

　如果一行的时候，两边对齐或者 垂直居中的话可以用 display:flex布局。使用此属性，那么子元素都是display:block属性了

　flex容器可以让在容器div中的元素水平对齐，垂直居中对齐，两边对齐，有float属性

　①水平居中，垂直居中，两边对齐　

        .son:last-child {
            background-color: #333777;
            display: flex;
            align-items: center;
            justify-content: center;
            justify-content: space-between;
        }

　　② 让容器拥有float属性，在父元素中填写如下属性

        .container {
            display: flex;
        }

　　

 ③  flex主轴方向，默认是x轴，也可以设置y轴为主轴

        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }

　　如下为主轴为Y轴，