美文网首页
flex布局

flex布局

作者: 悟空你又瘦了 | 来源:发表于2019-03-01 22:34 被阅读0次

    基础知识

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                height: 600px;
                border: 1px solid gray;
    
                /* 1. 使用弹性布局 需要在 父盒子中 开启 弹性布局
                    弹性布局 开启以后 元素默认分为 两个轴排布
                        主轴 默认是x方向
                        副轴 默认是y方向
                 */
                display: flex;
    
                /*  调整元素 在主轴上的 排布方式
                    flex-end 到主轴的末尾
                    flex-start 默认值
                    center 居中
                    space-between 左右靠边,中间间隙 相等排布
                    space-around 左右 间隙相等
                 */
                justify-content: space-between;
                /* 设置副轴的 对其方式
                    如果 只有一行 设置 元素 在副轴上的对其方式
                    flex-start
                    flex-end
                    center
                    stretch:拉伸,是默认值,在不设置高的时候出现效果,如果设置了高就没有用了
                 */
                align-items: stretch;
            }
    
            li{
                width: 100px;
                height: 100px;
                margin: 5px;
                border: 1px solid gray;
                text-align: center;
                line-height: 100px;
                font-size: 30px;
                font-weight: 900;
            }
            /*  设置 第二个li标签 居中 */
            li:nth-child(2){
                /*  单独设置元素 在副轴上的对其方式 会覆盖父元素的 align-items */
                /* 如果父级盒子使用的是在侧轴上拉伸的效果的话,用完这个属性会取消拉伸的效果 */
                align-self: center;
            }
            /*  设置第三个li标签 顶部 */
            li:nth-child(3){
                /*  单独设置元素 在副轴上的对其方式 会覆盖父元素的 align-items */
                align-self: flex-end;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>
    
    //将主轴变成纵向的,order换顺序,(是不是要换行flex-wrap: nowrap;)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                height: 400px;
                border: 1px solid gray;
    
                /* 1. 使用弹性布局 需要在 父盒子中 开启 弹性布局
                    弹性布局 开启以后 元素默认分为 两个轴排布
                        主轴 默认是x方向
                        副轴 默认是 y方向
                 */
                display: flex;
    
                /*  调整主轴方向 变为 垂直
                    主轴 变为是y方向
                    副轴 变为是x方向
                 */
                flex-wrap: nowrap;
                flex-direction: column;
    
                /* 设置主轴的排布  哪怕方向改变  */
                justify-content: space-between;
    
                /*  设置副轴的排布 方向改变之后 依旧是设置副轴 */
                align-items: center;
            
            }
    
            li{
                width: 100px;
                height: 100px;
                margin: 5px;
                border: 1px solid gray;
                text-align: center;
                line-height: 100px;
                font-size: 30px;
                font-weight: 900;
            }
    
            /* order:改变盒子的排列顺序  默认是order:1 */
            li:nth-child(1){
                align-self: flex-start;
                order: 3;
            }
            li:nth-child(2){
                align-self: flex-end;
                order: 1;
            }
            li:nth-child(3){
                align-self: center;
                order: 2;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    </html>
    
    //开启换行
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                height: 300px;
                border: 1px solid gray;
    
                /* 1. 使用弹性布局 需要在 父盒子中 开启 弹性布局
                    弹性布局 开启以后 元素默认分为 两个轴排布
                        主轴 默认是x方向
                        副轴 默认是 y方向
    
                    默认 只能在一行 待着 无法换行    
                 */
                display: flex;
    
                /*  开启弹性布局的换行 */
                flex-wrap: wrap;
    
                /* 变为多行了 无法使用 align-items 进行位置设置 
                    align-content 在多行的时候 设置属性 跟 justify-content 一模一样
                    如果只有 一行时 无法生效
                */
                align-content: space-around;
            }
    
            li{
                width: 100px;
                height: 100px;
                margin: 5px;
                border: 1px solid gray;
                text-align: center;
                line-height: 100px;
                font-size: 30px;
                font-weight: 900;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:flex布局

          本文链接:https://www.haomeiwen.com/subject/gcdfkftx.html