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

最新推荐文章于 2024-11-02 15:14:01 发布

JhonXie

最新推荐文章于 2024-11-02 15:14:01 发布

阅读量439

点赞数

原文链接：http://www.cnblogs.com/CaktyRiven/p/10965838.html

版权

@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