CSS | 365笔记第90天 | 详细实例介绍Flex布局

详细介绍flex布局；

详细介绍flex布局

    <!DOCTYPE html>
    <html>
    <head>
        <title>flex布局</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./flex.css">
    </head>
    <style type="text/css">
        .wrapper{
            min-width: 1200px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }
        .container{
            width:120px;
            height:120px;
            border:1px solid #ccc;
        }
        .box{
            width:40px;
            height:40px;
            background-color: #f5f5f5;
            font-size: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <body>
        <div class="wrapper">
            <!-- 子元素在父元素里面的位置 -->
            <div class="container flex flex-hs">
                <div class="box">垂直居左</div>
            </div>
            <div class="container flex flex-hc">
                <div class="box">垂直居中</div>
            </div>
            <div class="container flex flex-he">
                <div class="box">垂直居右</div>
            </div>
            <div class="container flex flex-vc">
                <div class="box">水平居中</div>
            </div>
            <div class="container flex flex-vc1">
                <div class="box">水平垂直居中</div>
            </div>
            <div class="container flex flex-vc flex-he">
                <div class="box">水平垂直居右</div>
            </div>
            <div class="container flex flex-ve flex-hs">
                <div class="box">水平垂直居左</div>
            </div>
            <div class="container flex flex-ve flex-hc">
                <div class="box">底端居中</div>
            </div>
            <div class="container flex flex-ve flex-he">
                <div class="box">底端居右</div>
            </div>

            <div class="container flex flex-vs">
                <div class="box">顶部对齐居左</div>
            </div>
            <!-- 子元素在父元素里面的位置 -->

            <!-- 两个元素 -->
            <div class="container flex flex-sb">
                <div class="box">水平顶端对齐</div>
                <div class="box">水平顶端对齐</div>
            </div>

            <div class="container flex flex-sb flex-vc">
                <div class="box">水平居中对齐</div>
                <div class="box">水平居中对齐</div>
            </div>
            <div class="container flex flex-sb flex-ve">
                <div class="box">水平底端对齐</div>
                <div class="box">水平底端对齐</div>
            </div>
            
            <div class="container flex flex-sb flex-fc">
                <div class="box">垂直左对齐</div>
                <div class="box">垂直左对齐</div>
            </div>
            <div class="container flex flex-vc flex-sb flex-fc">
                <div class="box">垂直居中对齐</div>
                <div class="box">垂直居中对齐</div>
            </div>
            <div class="container flex flex-ve flex-sb flex-fc">
                <div class="box">垂直右对齐</div>
                <div class="box">垂直右对齐</div>
            </div>
            <div class="container flex flex-hs flex-fc">
                <div class="box">水平垂直左对齐</div>
                <div class="box">水平垂直左对齐</div>
            </div>
            <div class="container flex flex-hc flex-fc">
                <div class="box">水平居中对齐</div>
                <div class="box">水平居中对齐</div>
            </div>
            <div class="container flex flex-he flex-fc">
                <div class="box">水平居中对齐</div>
                <div class="box">水平居中对齐</div>
            </div>
            <div class="container flex flex-vs flex-fc">
                <div class="box">垂直左对齐</div>
                <div class="box">垂直左对齐</div>
            </div>
            <div class="container flex flex-vc flex-fc">
                <div class="box">垂直居中对齐</div>
                <div class="box">垂直居中对齐</div>
            </div>
            <div class="container flex flex-ve flex-fc">
                <div class="box">垂直右对齐</div>
                <div class="box">垂直右对齐</div>
            </div>
            
            <div class="container flex flex-hc flex-fc">
                <div class="box">水平左对齐</div>
                <div class="box">水平左对齐</div>
            </div>
            <div class="container flex flex-sa">
                <div class="box">顶端分散对齐</div>
                <div class="box">顶端分散对齐</div>
            </div>
            <div class="container flex flex-vc flex-sa">
                <div class="box">居中分散对齐</div>
                <div class="box">居中分散对齐</div>
            </div>
            <div class="container flex flex-ve flex-sa">
                <div class="box">底端分散对齐</div>
                <div class="box">底端分散对齐</div>
            </div>
            <!-- 两个元素 -->

            <!-- 自对齐 -->
            <div class="container flex">
                <div class="box flex flex-selftop">自对齐</div>
                <div class="box flex flex-selfcenter">自对齐</div>
                <div class="box flex flex-selfbottom">自对齐</div>
            </div>
            <div class="container flex">
                <div class="box flex flex-selfbottom">自对齐</div>
                <div class="box flex flex-selfcenter">自对齐</div>
                <div class="box flex flex-selftop">自对齐</div>
            </div>
            <div class="container flex flex-wrap">
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex flex-selfbottom">自对齐</div>
            </div>
            <div class="container flex flex-wrap flex-hc">
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex flex-selfbottom">自对齐</div>
            </div>
            <div class="container flex flex-wrap flex-he">
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex">自对齐</div>
                <div class="box flex flex-selfbottom">自对齐</div>
            </div>


            <div class="container flex flex-wrap flex-sb ">
                <div class="flex flex-fb flex-sb">
                <div class="box">左右上下</div>
                <div class="box">左右上下</div>
                </div>
                <div class="flex flex-fb flex-ve flex-sb">
                <div class="box">左右上下</div>
                <div class="box">左右上下</div>
                </div>
            </div>
            <div class="container flex flex-wrap flex-sb ">
                <div class="flex flex-fb flex-sb">
                <div class="box">上下</div>
                <div class="box">上下</div>
                <div class="box">上下</div>
                </div>
                <div class="flex flex-fb flex-ve flex-sb">
                <div class="box">上下</div>
                <div class="box">上下</div>
                <div class="box">上下</div>
                </div>
            </div>
            <div class="container flex flex-wrap flex-sb ">
                <div class="flex flex-fb flex-sb">
                <div class="box">左右上下中</div>
                <div class="box">左右上下中</div>
                </div>
                <div class="flex flex-fb flex-vc flex-hc">
                <div class="box">左右上下中</div>
                </div>
                <div class="flex flex-fb flex-ve flex-sb">
                <div class="box">左右上下中</div>
                <div class="box">左右上下中</div>
                </div>
            </div>
            <!-- 自对齐 -->




            
            <div class="container flex flex-ve">
                <div class="box">底部对齐居左</div>
            </div>
            
            <div class="container flex flex-vb">
                <div class="box">baseline</div>
            </div>
            <div class="container flex flex-vst">
                <div class="box">stretch</div>
            </div>
            
            <div class="container flex flex-lr">
                <div class="box ">子方向居左</div>
                <div class="box ">子方向居左</div>
            </div>
            <div class="container flex flex-rl">
                <div class="box">子方向居右</div>
                <div class="box">子方向居右</div>
            </div>
            <div class="container flex flex-tb">
                <div class="box">子方向horizontal</div>
                <div class="box">子方向horizontal</div>
            </div><div class="container flex flex-bt">
                <div class="box">子方向reverse</div>
                <div class="box">子方向reverse</div>
            </div>
            <div class="container flex flex-nowrap">
                <div class="box">换行nowrap</div>
                <div class="box">换行nowrap</div>
                <div class="box">换行nowrap</div>
                <div class="box">换行nowrap</div>
            </div>
            <div class="container flex flex-wrap">
                <div class="box">换行wrap</div>
                <div class="box">换行wrap</div>
                <div class="box">换行wrap</div>
                <div class="box">换行wrap</div>
            </div>
            <div class="container flex flex-wrap-reverse">
                <div class="box">换行reverse</div>
                <div class="box">换行reverse</div>
                <div class="box">换行reverse</div>
                <div class="box">换行reverse</div>
            </div>
            <div class="container flex flex-ytop-m">
                <div class="box">多主轴start</div>
                <div class="box">多主轴start</div>
            </div>
            <div class="container flex flex-ycenter-m">
                <div class="box">多主轴center</div>
                <div class="box">多主轴center</div>
            </div>
            <div class="container flex flex-ybottom-m">
                <div class="box ">多主轴end</div>
                <div class="box ">多主轴end</div>
            </div>
            <div class="container flex flex-ybetween-m">
                <div class="box">多主轴between</div>
                <div class="box">多主轴between</div>
            </div>
            <div class="container flex flex-yaround-m ">
                <div class="box">多主轴around</div>
                <div class="box">多主轴around</div>
            </div>
            <div class="container flex">
                <div class="box flex-fauto">子属性auto</div>
            </div>
            <div class="container flex">
                <div class="box flex-fnone">子属性flex-none</div>
            </div>

            <div class="container flex">
                <div class="box flex-0">子属性flex-0</div>
            </div>
            <div class="container flex">
                <div class="box flex-f1">子属性flex-f1</div>
            </div>
            <div class="container flex">
                <div class="box flex-f2">子属性flex-f2</div>
            </div>
            <div class="container flex">
                <div class="box flex-f3">子属性flex-f3</div>
            </div>

            <div class="container flex">
                <div class="box flex-selftop">子元素自己flex-start</div>
            </div>
            <div class="container flex">
                <div class="box flex-selfcenter">子元素自己center</div>
            </div>
            <div class="container flex">
                <div class="box flex-selfbottom">子元素自己flex-end</div>
            </div>
            
            <div class="container flex">
                <div class="box flex-selfbaseline">子元素自己baseline</div>
            </div>
            <div class="container flex">
                <div class="box flex-selfstretch">子元素自己stretch</div>
            </div>
        </div>
    </body>

    </html>

公共css:

    .flex {
        display: -webkit-box;
        /* 老版本语法:Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;
        /* 老版本语法:Firefox (buggy) */
        display: -ms-flexbox;
        /* 混合版本语法:IE 10 */
        display: -webkit-flex;
        /* 新版本语法:Chrome 21+ */
        display: -moz-flex;
        display: flex;
        /* 新版本语法:Opera 12.1, Firefox 22+ */
    }

    /*
       主轴对齐方式
    */
    /*容器主轴居中对齐*/
    .flex-hc {
        -moz-box-pack: center;
        /*Firefox*/
        -webkit-box-pack: center;
        /*Safari,Opera,Chrome*/
        box-pack: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
        -ms-justify-content: center;
    }

    /*容器主轴左对齐（默认）*/
    .flex-hs {
        -moz-box-pack: start;
        /*Firefox*/
        -webkit-box-pack: start;
        /*Safari,Opera,Chrome*/
        box-pack: start;
        -moz-justify-content: flex-start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -ms-justify-content: flex-start;
    }

    /*容器主轴右对齐*/
    .flex-he {
        -moz-box-pack: end;
        /*Firefox*/
        -webkit-box-pack: end;
        /*Safari,Opera,Chrome*/
        box-pack: end;
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /*容器主轴两端对齐*/
    .flex-sb {
        -moz-box-pack: justify;
        /*Firefox*/
        -webkit-box-pack: justify;
        /*Safari,Opera,Chrome*/
        box-pack: justify;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /*容器主轴平均分布*/
    .flex-sa {
        -moz-justify-content: space-around;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
     交叉轴对齐方式
    */

    /*顶部对齐*/
    .flex-vs {
        -moz-box-align: start;
        /*Firefox*/
        -webkit-box-align: start;
        /*Safari,Opera,Chrome*/
        box-align: start;
        -moz-align-items: flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /*底部对齐*/
    .flex-ve {
        -moz-box-align: end;
        /*Firefox*/
        -webkit-box-align: end;
        /*Safari,Opera,Chrome*/
        box-align: end;
        -moz-align-items: flex-end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /*居中对齐*/
    .flex-vc {
        -moz-box-align: center;
        /*Firefox*/
        -webkit-box-align: center;
        /*Safari,Opera,Chrome*/
        box-align: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center;
        -ms-align-items: center;
    }

    .flex-vb {
        -moz-box-align: baseline;
        /*Firefox*/
        -webkit-box-align: baseline;
        /*Safari,Opera,Chrome*/
        box-align: baseline;
        -moz-align-items: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
    }

    .flex-vst {
        -moz-box-align: stretch;
        /*Firefox*/
        -webkit-box-align: stretch;
        /*Safari,Opera,Chrome*/
        box-align: stretch;
        -moz-align-items: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /*
    *水平垂直居中
    */
    .flex-vc1 {
        -moz-box-pack: center;
        /*Firefox*/
        -webkit-box-pack: center;
        /*Safari,Opera,Chrome*/
        box-pack: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
        -moz-box-align: center;
        /*Firefox*/
        -webkit-box-align: center;
        /*Safari,Opera,Chrome*/
        box-align: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /*
     *子元素显示方向
    */
    .flex-lr {
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        /*Firefox*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        /*Safari,Opera,Chrome*/
        box-orient: vertical;
        box-direction: normal;
        -moz-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .flex-rl {
        -moz-box-orient: vertical;
        -moz-box-direction: reverse;
        /*Firefox*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        /*Safari,Opera,Chrome*/
        box-orient: vertical;
        box-direction: reverse;
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .flex-tb {
        -moz-box-direction: normal;
        /*Firefox*/
        -webkit-box-direction: normal;
        /*Safari,Opera,Chrome*/
        box-direction: normal;
        -moz-box-orient: horizontal;
        /*Firefox*/
        -webkit-box-orient: horizontal;
        /*Safari,Opera,Chrome*/
        box-orient: horizontal;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .flex-bt {
        -moz-box-direction: reverse;
        /*Firefox*/
        -webkit-box-direction: reverse;
        /*Safari,Opera,Chrome*/
        box-direction: reverse;
        -moz-box-orient: horizontal;
        /*Firefox*/
        -webkit-box-orient: horizontal;
        /*Safari,Opera,Chrome*/
        box-orient: horizontal;
        -moz-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 换行
    */
    .flex-nowrap {
        -moz-box-lines: single;
        /*Firefox*/
        -webkit-box-lines: single;
        /*Safari,Opera,Chrome*/
        box-lines: single;
        -moz-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .flex-wrap {
        -moz-box-lines: multiple;
        /*Firefox*/
        -webkit-box-lines: multiple;
        /*Safari,Opera,Chrome*/
        box-lines: multiple;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-wrap-reverse {
        -moz-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }


    /*
    *多主轴对齐
    */
    .flex-ytop-m {
        -moz-align-content: flex-start;
        -webkit-align-content: flex-start;
        align-content: flex -start;
    }

    .flex-ycenter-m {
        -moz-align-content: center;
        -webkit-align-content: center;
        align-content: center;
    }

    .flex-ybottom-m {
        -moz-align-content: flex-end;
        -webkit-align-content: flex-end;
        align-content: flex-end
    }

    .flex-ybetween-m {
        -moz-align-content: space-between;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    .flex-yaround-m {
        -moz-align-content: space-around;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    .flex-ystretch-m {
        -moz-align-content: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }


    /**
    **子元素属性
    **/
    .flex-fauto {
        -webkit-box-flex: auto;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: auto;
        /* OLD - Firefox 19- */
        -webkit-flex: auto;
        /* Chrome */
        -ms-flex: auto;
        /* IE 10 */
        flex: auto;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-fnone {
        -webkit-box-flex: none;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: none;
        /* OLD - Firefox 19- */
        -webkit-flex: none;
        /* Chrome */
        -ms-flex: none;
        /* IE 10 */
        flex: none;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-0 {
        -webkit-box-flex: 0;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 0;
        /* OLD - Firefox 19- */
        -webkit-flex: 0;
        /* Chrome */
        -ms-flex: 0;
        /* IE 10 */
        flex: 0;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f1 {
        -webkit-box-flex: 1;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;
        /* OLD - Firefox 19- */
        -webkit-flex: 1;
        /* Chrome */
        -ms-flex: 1;
        /* IE 10 */
        flex: 1;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f2 {
        -webkit-box-flex: 2;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 2;
        /* OLD - Firefox 19- */
        -webkit-flex: 2;
        /* Chrome */
        -ms-flex: 2;
        /* IE 10 */
        flex: 2;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f3 {
        -webkit-box-flex: 3;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 3;
        /* OLD - Firefox 19- */
        -webkit-flex: 3;
        /* Chrome */
        -ms-flex: 3;
        /* IE 10 */
        flex: 3;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f4 {
        -webkit-box-flex: 4;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 4;
        /* OLD - Firefox 19- */
        -webkit-flex: 4;
        /* Chrome */
        -ms-flex: 4;
        /* IE 10 */
        flex: 4;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f5 {
        -webkit-box-flex: 5;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 5;
        /* OLD - Firefox 19- */
        -webkit-flex: 5;
        /* Chrome */
        -ms-flex: 5;
        /* IE 10 */
        flex: 5;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f6 {
        -webkit-box-flex: 6;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 6;
        /* OLD - Firefox 19- */
        -webkit-flex: 6;
        /* Chrome */
        -ms-flex: 6;
        /* IE 10 */
        flex: 6;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f7 {
        -webkit-box-flex: 7;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 7;
        /* OLD - Firefox 19- */
        -webkit-flex: 7;
        /* Chrome */
        -ms-flex: 7;
        /* IE 10 */
        flex: 7;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f8 {
        -webkit-box-flex: 8;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 8;
        /* OLD - Firefox 19- */
        -webkit-flex: 8;
        /* Chrome */
        -ms-flex: 8;
        /* IE 10 */
        flex: 8;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-f9 {
        -webkit-box-flex: 9;
        /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 9;
        /* OLD - Firefox 19- */
        -webkit-flex: 9;
        /* Chrome */
        -ms-flex: 9;
        /* IE 10 */
        flex: 9;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    /*
     * 子元素单独对齐方式
     */

    .flex-selftop {
        -webkit-ailgn-self: flex-start;
        -moz-align-self: flex-start;
        align-self: flex-start;
    }

    .flex-selfbottom {
        -webkit-ailgn-self: flex-end;
        -moz-align-self: flex-end;
        align-self: flex-end;
    }

    .flex-selfcenter {
        -webkit-ailgn-self: center;
        -moz-align-self: center;
        align-self: center;
    }

    .flex-selfbaseline {
        -webkit-ailgn-self: baseline;
        -moz-align-self: baseline;
        align-self: baseline;
    }

    .flex-selfstretch {
        -webkit-ailgn-self: stretch;
        -moz-align-self: stretch;
        align-self: stretch;
    }

    .flex-fc {
        flex-direction: column
    }

    .flex-fb {
        flex-basis: 100%;
    }

    /*网格布局*/

    .flex-sm1 {
        flex: 0 0 10%;
    }

    .flex-sm2 {
        flex: 0 0 20%;
    }

    .flex-sm3 {
        flex: 0 0 30%;
    }

    .flex-sm4 {
        flex: 0 0 40%;
    }

    .flex-sm5 {
        flex: 0 0 50%;
    }

    .flex-sm6 {
        flex: 0 0 60%;
    }

    .flex-sm7 {
        flex: 0 0 70%;
    }

    .flex-sm8 {
        flex: 0 0 80%;
    }

    .flex-sm9 {
        flex: 0 0 90%;
    }

    .flex-sm10 {
        flex: 0 0 100%;
    }

转载于:https://www.jianshu.com/p/04aff459feb4

CSS | 365笔记第90天 | 详细实例介绍Flex布局

猜你喜欢