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

      

  • 相关阅读:
    平台化软件的设计与应用前景分析
    SNF.Net 快速开发平台Spring.Net.Framework 诞生的由来与规划
    成功的10大策略
    要想有什么样的成就就要有什么样的眼光-SNF快速开发平台
    技术到管理岗位的角色转换:从优秀骨干到优秀管理者
    linux常用命令积累
    centOS 虚拟机设置固定IP:图形化设置
    单例模式的常见应用场景
    java获取对象属性类型、属性名称、属性值
    dubbo main方法启动
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/10965838.html
Copyright © 2011-2022 走看看