zoukankan      html  css  js  c++  java
  • 常用Flex 布局归置 》仅做笔记 (scss)

    @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;
    }
    

      

  • 相关阅读:
    SQL Server存储过程
    数据访问模式:数据并发控制(Data Concurrency Control)
    C#设计模式系列:观察者模式(Observer)
    awk内置字符串函数 awk 格式化输出
    使用MegaCli和Smartctl获取普通磁盘
    Shell之date用法
    linux 系统下查看raid信息,以及磁盘信息
    linux下proc里关于磁盘性能的参数
    hdparm测试硬盘性能
    查看现有运行的linux服务器有多少内存条
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/10965838.html
Copyright © 2011-2022 走看看