flex-app.less

/*! https://github.com/lzxb/flex.css */
/*
    定义flex布局
*/
.flex-app (@flex, @flex-box){
    [@{flex}] {
    display: flex;
        &>* {
            display: block;
        }
        &>[@{flex}]{
            display: flex;
        }
    }
    /*
        主轴方向：从左到右(默认)
    */

    [@{flex}~="dir:left"] {
        flex-direction: row;
    }


    /*
        主轴方向：从右到左
    */

    [@{flex}~="dir:right"]{
        flex-direction: row-reverse;
        -webkit-box-pack: end; //修复旧版本主轴和标准主轴flex表现不一致的bug
    }


    /*
        主轴方向：从上到下
    */

    [@{flex}~="dir:top"]{
        flex-direction: column;
    }


    /*
        主轴方向：从下到上
    */

    [@{flex}~="dir:bottom"] {
        flex-direction: column-reverse;
        -webkit-box-pack: end; //修复旧版本主轴和标准主轴flex表现不一致的bug
    }

    /*
        主轴对齐方式：从左到右(默认)
    */

    [@{flex}~="main:left"]{
        justify-content: flex-start;
    }


    /*
        主轴对齐方式：从右到左
    */

    [@{flex}~="main:right"] {
        justify-content: flex-end;
    }


    /*
        主轴对齐方式：两端对齐
    */

    [@{flex}~="main:justify"] {
        justify-content: space-between;
    }


    /*
        主轴对齐方式：居中对齐
    */

    [@{flex}~="main:center"] {
        justify-content: center;
    }
    /*
        交叉轴齐方式：从上到下(默认)
    */

    [@{flex}~="cross:top"]{
        align-items: flex-start;
    }


    /*
        交叉轴齐方式：从下到上
    */

    [@{flex}~="cross:bottom"] {
        align-items: flex-end;
    }


    /*
        交叉轴齐方式：居中对齐
    */

    [@{flex}~="cross:center"] {
        align-items: center;
    }


    /*
        交叉轴齐方式：跟随内容高度对齐
    */

    [@{flex}~="cross:baseline"] {
        align-items: baseline;
    }


    /*
        交叉轴齐方式：高度并排铺满
    */

    [@{flex}~="cross:stretch"] {
        align-items: stretch;
    }

    /*
        子元素平分宽度
    */

    [@{flex}~="box:mean"]>*, //所有元素
    [@{flex}~="box:first"]>*, //第一个子元素
    [@{flex}~="box:last"]>*, //最后一个子元素
    [@{flex}~="box:justify"]>* //两端第一个子元素
    {
        width: 0%;
        height: auto;
        flex-grow: 1;
        flex-shrink: 1;
    }

    [@{flex}~="box:first"]>*:first-child, //第一个子元素
    [@{flex}~="box:last"]>*:last-child, //最后一个子元素
    [@{flex}~="box:justify"]>*:first-child, //两端第一个子元素
    [@{flex}~="box:justify"]>*:last-child //两端最后一个子元素
    {
        width: auto;
        flex-grow: 0;
        flex-shrink: 0;
    }
    /*
        子元素平分高度
    */
    [@{flex}~="dir:top"][@{flex}~="box:mean"]>*,
    [@{flex}~="dir:top"][@{flex}~="box:first"]>*, //第一个子元素
    [@{flex}~="dir:top"][@{flex}~="box:last"]>*, //最后一个子元素
    [@{flex}~="dir:top"][@{flex}~="box:justify"]>*, //两端最后一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:mean"]>*,
    [@{flex}~="dir:bottom"][@{flex}~="box:first"]>*, //第一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:last"]>*, //最后一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>* //两端最后一个子元素
    {
        width: auto;
        height: 0;
        flex-grow: 1;
        flex-shrink: 1;
    }
    [@{flex}~="dir:top"][@{flex}~="box:first"]>*:first-child, //第一个子元素
    [@{flex}~="dir:top"][@{flex}~="box:last"]>*:last-child, //最后一个子元素
    [@{flex}~="dir:top"][@{flex}~="box:justify"]>*:first-child, //两端第一一个子元素
    [@{flex}~="dir:top"][@{flex}~="box:justify"]>*:last-child, //两端最后一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:first"]>*:first-child, //第一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:last"]>*:last-child, //最后一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>*:first-child //两端第一一个子元素
    [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>*:last-child //两端最后一个子元素
    {
        height: auto;
        flex-grow: 0;
        flex-shrink: 0;
    }

    //子元素伸缩比例循环
    .flex-box(10);
    .flex-box(@n, @i: 0) when (@i =< @n) {
        [@{flex-box}="@{i}"] {
            flex-grow: @i;
            flex-shrink: @i;
        }
        .flex-box(@n, (@i + 1));
    }

}