flex 布局

1.介绍

流行 主流 布局方案pc端 + 移动端

2.父项

1.只要父盒子添加了一行代码 display:flex; 改称呼 父盒子 -> 父项

2.添加了 display：flex；

​ 1 定位、浮动 margin 都可以正常使用 不受flex的影响

3.主轴 子项 对齐方式 justify-content

​ 1.flex-start 左对齐 默认对齐方式

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 左对齐 */
            
            justify-content: flex-start;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

2.flex-end右对齐

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 左对齐 */

            justify-content: flex-end;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

3.centr居中对齐（重要）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 居中对齐 */

            justify-content: centr;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

4.space-evenly 空间完全平分（重要）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /*  空间完全平分*/
            justify-content: space-evenly;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

5.space-around 两侧空间小 （重要）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 两侧空间小 */

            justify-content: space-around;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

6.space-between 贴两侧 （重要）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 贴两侧对齐 */

            justify-content: space-dtween;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

4.侧轴 子项对齐方式 align-items （单行）

1.flex-start 上对齐（ 默认对齐）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 上对齐 */
			align-items: flex-start	
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

2.flex-end 下对齐

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 下对齐 */
            align-items:flex-end;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

3.centr 居中（重要）

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: flex;
           /* 居中对齐*/
            align-items：centr；
        }
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

5.设置父项 主轴子项 换行 - 子项默认不换行的

​ 1.flex-wrap:wrap;

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: aqua;
        display: flex;
       /* 换行*/
       flex-wrap：wrap；
       
    }
    span {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

6.侧轴 子项 对齐方式 align-content （多行） 用法和主轴对齐方式一样

1.flex-start 上对齐

​ 2.flex-end 下对齐

​ 3.centr 居中对齐

​ 4.space-evenly 空间完全平分

​ 5.space-around 两侧空间相等

​ 6.space-between 贴两边

7.修改主轴方向 flex-direction

1.row 默认值 行 左到右

2.column 列 上到下

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: aqua;
        display: flex;
       /* 修改主轴*/
       flex-dircetion:column ;
    }
    span {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

3.主轴方向发生改变的时候

​ 1.justify-content 是从上到下

​ 2.align-items 是从左到右

3.子项

1.只要他父盒子 变成flex盒子 子盒子 叫 子项

2.影响

	1.浮动  无效

​ 2.定位 margin 正常使用

​ 3.不区分 行内块 、块级 直接添加 设置 宽度和高度属性

3.默认的宽度高度 （重点）

​ 1.宽度有内容撑开

​ 2.高度 等同父盒子的高度

4.设置子项 占父项剩下的宽度的比例 ：

​ 1.flex: 1;

5.设置子项自己在侧轴上的对齐的位置 align-items (少用)

​ 1.flex-start 上对齐

​ 2. flex-end 下对齐

​ 3.centr 居中对齐

6.设置子项在主轴上的排列 顺序 order (少用)

1.值越小 越靠前

2.默认值 0