File基础语法

一、常见属性：

flex-direction:设置主轴的方向

justify-content:设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行

align-content:设置侧轴上的子元素排列方式(多行)

align-items:设置侧轴上的子元素排列方式(单行)

flex-flow:复合属性:相当于设置了flex-direction和flex-wrap

align-content和align-litems区别

二、上面这些属性常见的方法

        这里主要是flex-direction

<style>
        div{
            
            /* 给父类添加flex属性 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* justify-content: space-around; */
            /* 默认的主轴是 x 轴 行 row， 那么y 轴就是侧轴 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴，x轴就成了侧轴 */
            /* flex-direction: column; */
            /* 水平线剧中 */
            justify-content: center;
            align-items: center;
        }
        div span{
            /* width: 150px; */
            height: 100px;
            background-color:purple ;
            margin-right: 5px;
            flex: 1;
        }
    </style>


<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

        justift-content的方法

 <style>
        div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 现在我们的主轴是y */
            flex-direction: column;
            /* 向下 */
            /* justify-content: flex-end;*/
            /* 向上 */
            /* justify-content: flex-start; */
            /* 剧中 */
            /* justify-content: center; */
            /* 先两边贴边，在分配剩余空间 */
            justify-content: space-between;

        }
        div span{
            width: 150px;
            height: 100px;
            background-color: red;
        }

    </style>

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

<style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            /* justify-content: flex-start; */
            /* 向右对齐 */
            /* justify-content: flex-end; */
            /* 剧中对齐 */
            /* justify-content:center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，在分配剩余空间 */
            justify-content: space-between;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color:purple ;
            
        }
    </style>


    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

        flex-wrap的方法

<style>
        div{
            display: flex;
            width: 600px;
            height: 400px;
            background-color:pink;
            /* flex布局种，默认的子元素不会换行，子元素会变越来越小 */
                /* 这个是不会换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            flex-wrap: wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: blue;
            color: #fff;
            margin: 10px;
        }

    </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

        align-items的用法

<style>
    div{
        display: flex;
        width: 600px;
        height: 400px;
        background-color:pink;
        /* 主轴剧中 */
        justify-content: center;
        /* 侧轴剧中 */
        align-items: center;
        /* 拉伸，多少子盒子不用给高度 */
        /* align-items: stretch; */

    }
    div span{
        width: 150px;
        height: 100px;
        background-color: blue;
        color: #fff;
        margin: 10px;
    }
</style>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>

        align-content的方法

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

        div span{
            height: 100px;
            width: 150px;
            background-color: chartreuse;
            color: #fff;
            margin: 10px;
        }
</style>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
        </div>

        flex-flow的用法

<style>
            div{
                display: flex;
                width: 600px;
                height: 300px;
                background-color: pink;
                /* flex-direction: column;
                flex-wrap: wrap; */
                /* 阿布设置主轴方向和是否换行(换行) 简写 */
                flex-flow: column wrap;
            }
            div span{
                width: 150px;
                height: 100px;
                background-color: purple;
            }
    </style>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
           

        </div>

        用flex做一个布局

 

<style>
        section{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin:  0 auto;

        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;
        }
        section div:nth-child(2){
            flex: 1;
            background-color: yellow;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: blue;
        }

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


    </style>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
        <p>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>

再温故一下

    //如果把第三给span单独放下面去
<style>
        div {
            display: flex;
            height: 400px;
            width: 600px;
            background-color: pink;
        }
        div span {
            height: 100px;
            width: 150px;
            background-color: yellow;
        }
        div span:nth-child(2){
            /* 默认值是0 */
            /* 把2号盒子放前面去 */
            order: -1;
        }
        /* 让自己单独行动 */
        div span:nth-child(3) {
            align-self: flex-end;
        }


    </style>

<div>
            <span>1</span><span>2</span><span>3</span>
        </div>

还有课后案例写一个