快捷flex布局

最新推荐文章于 2024-05-31 19:50:46 发布

console.log('D')

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量56

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/126718350

版权

html+css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

@import "./assets/css/fastflex.less";

<style>

fastflex.css

.f_1 {

    flex: 1;

    min-width: 1px;

    min-height: 1px;

}



.fs_0 {

    flex-shrink: 0;

}



.fc {

    display: flex;

    flex-direction: column;



    &_c:extend(.fc) {

        align-items: center;

    }



    &_fs:extend(.fc) {

        align-items: flex-start;

    }



    &_fe:extend(.fc) {

        align-items: flex-end;

    }



    &_s:extend(.fc) {

        align-items: stretch;

    }



    &_b:extend(.fc) {

        align-items: baseline;

    }

}



.fcr {

    display: flex;

    flex-direction: column-reverse;



    &_c:extend(.fcr) {

        align-items: center;

    }



    &_fs:extend(.fcr) {

        align-items: flex-start;

    }



    &_fe:extend(.fcr) {

        align-items: flex-end;

    }



    &_s:extend(.fcr) {

        align-items: stretch;

    }



    &_b:extend(.fcr) {

        align-items: baseline;

    }

}



.fr {

    display: flex;

    flex-direction: row;



    &_c:extend(.fr) {

        align-items: center;

    }



    &_fs:extend(.fr) {

        align-items: flex-start;

    }



    &_fe:extend(.fr) {

        align-items: flex-end;

    }



    &_s:extend(.fr) {

        align-items: stretch;

    }



    &_b:extend(.fr) {

        align-items: baseline;

    }

}



.frr {

    display: flex;

    flex-direction: row-reverse;



    &_c:extend(.frr) {

        align-items: center;

    }



    &_fs:extend(.frr) {

        align-items: flex-start;

    }



    &_fe:extend(.frr) {

        align-items: flex-end;

    }



    &_s:extend(.frr) {

        align-items: stretch;

    }



    &_b:extend(.frr) {

        align-items: baseline;

    }

}



.fa {

    &_s {

        align-content: stretch;

    }



    &_c {

        align-content: center;

    }



    &_fs {

        align-content: flex-start;

    }



    &_fe {

        align-content: flex-end;

    }



    &_sb {

        align-content: space-between;

    }



    &_sa {

        align-content: space-around;

    }

}



.fs {

    &_fs {

        align-self: flex-start;

    }



    &_fe {

        align-self: flex-end;

    }



    &_s {

        align-self: stretch;

    }



    &_c {

        align-self: center;

    }



    &_b {

        align-self: baseline;

    }

}



.fj {

    &_s {

        justify-content: stretch;

    }



    &_fs {

        justify-content: flex-start;

    }



    &_fe {

        justify-content: flex-end;

    }



    &_c {

        justify-content: center;

    }



    &_sb {

        justify-content: space-between;

    }



    &_sbc {

        justify-content: space-between;



        &:before,

        &:after {

            content: "";

            display: block;

        }

    }



    &_sa {

        justify-content: space-around;

    }

}



.fw {

    &_w {

        flex-wrap: wrap;

    }



    &_wr {

        flex-wrap: wrap-reverse;

    }

}