常用Flex 布局归置》仅做笔记（scss）

雨点打透心脏的1/2处 2021-11-09 17:44 245阅读 0赞

@mixin df {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    }
    
    @mixin df-ai {
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
    }
    
    @mixin df-ai-fs {
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start;
    }
    
    @mixin df-ai-fe {
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
    }
    
    @mixin df-jc {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
    }
    
    @mixin df-jc-sa {
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }
    
    @mixin df-jc-sb {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }
    
    @mixin df-jc-fs {
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
    }
    
    @mixin df-jc-fe {
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
    }
    
    @mixin df-as {
        -webkit-align-self: center;
        -moz-align-self: center;
        align-self: center;
    }
    
    @mixin df-as-fe {
        -webkit-align-self: flex-end;
        -moz-align-self: flex-end;
        align-self: flex-end;
    }
    
    @mixin df-fs {
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        flex-shrink: 0;
    }
    
    @mixin fw-w {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    @mixin box-sizing {
        box-sizing: border-box;
    }
    
    @mixin user-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    @mixin fd-c{
        -webkit-flex-direction:column;
        -moz-flex-direction:column;
        flex-direction:column;
    }
    @mixin fd-r{
        -webkit-flex-direction:row;
        -moz-flex-direction:row;
        flex-direction:row;
    }
    @mixin fd-r-r{
        -webkit-flex-direction:row-reverse;
        -moz-flex-direction:row-reverse;
        flex-direction:row-reverse;
    }
    @mixin fn{
        -webkit-flex:none;
        -moz-flex:none;
        flex:none;
    }
    @mixin fa{
        -webkit-flex:auto;
        -moz-flex:auto;
        flex:auto;
    }

转载于:https://www.cnblogs.com/CaktyRiven/p/10965838.html