flex布局

flex布局

通过给父盒子（容器）添加flex属性，来控制子盒子（项目）的位置和排列方式

给父亲设置了flex布局之后，子元素的float、clear 和 vertical-align 属性将失效

flex布局父项常见属性

.flex-bj {
    display: flex;
    flex-direction: row;
/*1. flex-direction为设置主轴方向，默认为row横轴（x轴）排列,从左到右 */
    /* flex-direction: row-reverse; */
    /* 翻转，从右到左 */
    /* flex-direction: column; */
    /* column为设置纵轴（y轴）为主轴，从上到下 */
    /* flex-direction: column-reverse; */
    /* 翻转，从下到上 */
    justify-content: flex-start;
/* 2.justify-content为设置主轴上元素排列方式 */
    /* 子元素默认从左到右 */
    /* justify-content: flex-end; */
    /* 子元素从右到左 */
    /* justify-content: center; */
    /* 子元素居中对齐 */
    /* justify-content: space-around; */
    /* 子元素平分剩余空间 */
    /* justify-content: space-between; */
    /* 子元素两边贴边，其余平分剩余空间 */
    flex-wrap: nowrap;
/* 3.flex布局中默认不换行，子盒子太大装不下会自动缩小子盒子的大小，使其排列在一条轴线上 */
     /* flex-wrap: wrap; */
     /* 换行 */
     align-items: center;
/* 4.align-items设置侧轴排列方式（单行） */
     /* align-items: stretch; */
     /* 侧轴拉伸 */
     align-content: space-between;
/* 5.align-content设置换行时侧轴排列方式（多行） */
     /* 对单行无效 */
     flex-flow: column wrap;
/* 6.设置主轴方向和是否换行（换列）简写 */
        }

flex布局子项常见属性

 span {
            flex: 1;
/* 1.flex属性表示子元素在剩余空间中分配所占的份数,也可以是百分比，百分比相对于父亲 */
        }
        
        .flex-bj span:nth-child(2) {
            align-self: flex-end;
/* 2.align-self控制某一个子元素在侧轴上的排列方式 */
        }
        
        .flex-bj span:nth-child(3) {
            order: -1;
/* 3.控制子元素排列顺序，默认为0，越小越靠前*/
        }
         /* 线性渐变 */
        
        .jianbian {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀 */
            /* background: -webkit-linear-gradient(left, red, blue); */
            /* 从左开始 */
            /* background: -webkit-linear-gradient(red, blue); */
            /* 默认从上到下 */
            background: -webkit-linear-gradient(top left, red, blue);
            /* 从左上开始 */
        }