easy-flex.less

@flex-content-gap: 6px;



efr,.efr{
    display: flex;
    flex-direction: row;
    // width: inherit;
    // height: inherit;
    flex-wrap: wrap;
}
efc,.efc{
    display: flex;
    flex-direction: column;
    // width: inherit;
    // height: inherit;
    flex-wrap: nowrap;
}
efr1,.efr1{
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
efc1,.efc1{
    flex:1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
ef0,.ef0{flex: 0;}
ef1,.ef1{flex: 1;}
ef2,.ef2{flex: 2;}
ef3,.ef3{flex: 3;}
ef4,.ef4{flex: 4;}
ef5,.ef5{flex: 5;}
ef6,.ef6{flex: 6;}

.ef-gap{
    >*{
        margin: @flex-content-gap;
    }
}

.column-flex-100h{
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*π*/
.ef-pi{
    .column-flex-100h();
    >:nth-child(2){
        flex:1;
        display: flex;
        height: 100%;
        margin: 0;
        overflow: auto;
        >:not(:last-child){
            margin-right: @flex-content-gap;
        }
        >*{
            height: 100%;
            margin: 0;
        }
    }
    >:not(:first-child){
        margin: @flex-content-gap 0 0 0 ;
    }
}
/*T*/
.ef-t{
    .column-flex-100h();
    >:nth-child(2){
        flex:1;
        overflow: auto;
        margin: @flex-content-gap 0 0 0;
        >*{
            margin: 0;
        }
    }
}
/*E*/
.ef-e{
    display: flex;
    height: 100%;
    >:nth-child(1){
        flex:1;
        min-width:  25%;
        margin-right: @flex-content-gap;
    }
    >:nth-child(2){
        flex: 3;
        min-width: 25%;
        .column-flex-100h();
        >:not(:last-child){
            margin-bottom: @flex-content-gap;
        }
    }
}
/*center center*/
.ef-center{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
}
/*H*/
.h-flex-content{
    display: flex;
    justify-content: space-between;
}