flex布局笔记

 

1、布局原理

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

2、常见父项属性

2.1、flex-direction：设置主轴的方向(默认主轴是X)

flex-direction:column;将主轴改为y轴，纵轴

flex-direction:row; 将主轴改为x轴，横轴

flex-direction:row- reverse;主轴为x轴，并且翻转

flex-direction:column- reverse;主轴为y轴，并且翻转

        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是X轴行row那么y轴就是侧轴 */
            /* 我的元素是跟着主轴来排序的 */
            /* 从左到右 y轴是侧轴*/
            /* flex-direction: row; */
            /* 从右到左 y轴是侧轴*/
            /* flex-direction: row-reverse; */
            /* 从上到下，x轴是侧轴 */
            /* flex-direction: column; */
            /* 从下到上，X轴是侧轴 */
            flex-direction: column-reverse;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }

2.2、justify-content：设置主轴上的子元素排列方式（使用时确定好主轴是X还是Y）

• 值为flex-start 所有子元素在主轴头部显示

• 值为flex-end 所有子元素在主轴尾部显示

• 值为flex-center 所有子元素在主轴居中对齐

• 值为space-around 所有子元素平分剩余空间

• 值为space-between 所有子元素先两边贴边在平分剩余空间

        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认主轴是X轴 row */
            flex-direction: row;
            /* 默认值头部显示 从左开始*/
            /* justify-content: flex-start; */
            /* 尾部显示，从右开始 */
            /* justify-content: flex-end; */
            /* 中部对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边 再评分剩余空间 */
            justify-content: space-between;
        }

        div {
            display: flex;
            width: 300px;
            height: 400px;
            background-color: pink;
            /* 默认主轴是Y轴 column */
            flex-direction: column;
            /* 头部显示 从上开始*/
            /* justify-content: flex-start; */
            /* 尾部显示，从下开始 */
            /* justify-content: flex-end; */
            /* 中部对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边 再评分剩余空间 */
            justify-content: space-between;
        }

2.3、flex-wrap：设置子元素是否换行

• flex布局中，子元素默认是不换行，当一行放不下时，flex会自动缩小子元素宽，放到父元素里面

• 如果想要换行效果设置 flex-wrap：wrap

div {
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    /* 默认不换行 */
    /* flex-wrap: nowrap; */
    /* 设置wrap让子元素换行 */
    flex-wrap: wrap;
}

2.4、align-items：设置侧轴上的子元素排列方式（单行）

• 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是X轴 row */
            flex-direction: row;
            justify-content: center;
            /* 此处侧轴为Y轴 */
            /* 侧轴默认上方 flex-start */
            /* align-items: flex-start; */
            /* 侧轴居中 */
            align-items: center;
            /* 侧轴底部 */
            /* align-items: flex-end; */
            /* stretch 拉伸，沿着侧轴拉升，此处不要给高度才有效果 */
            /* align-items: stretch; */
        }

div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 设置主轴为Y轴 */
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

2.5、align-content：设置侧轴上的子元素的排列方式（多行）

• 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值

        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时侧轴上控制子元素对齐使用align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: flex-start; */
            align-content: space-around;
            /* align-content: space-between; */
        }

2.6、flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            flex-flow: column wrap;
         }

3、flex布局子项常见属性

3.1、flex属性

• flex属性定义子项目分配剩余空间，用flex来表示占多少份数

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        p span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: red;
        }

3.2、align-self、order

• align-self控制子项自己在侧轴上的排序方式，允许单个项目与其它项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

        div span:nth-child(3) {
            /* 第三个子元素沿着侧轴低侧对齐 */
            align-self: flex-end;
        }

• order属性定义项目的排列顺序：数值越小，排列越靠前，默认为0。 注意：和z-index不一样

        div span:nth-child(2) {
            order: -1;
            background-color: blue;
        }