zoukankan      html  css  js  c++  java
  • 新旧弹性盒 样式

    版本日期:17/09/20

    有问题请指出

    /**弹性父元素属性**/
    .flex {
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    
    /*flex 属性用于指定弹性子元素如何分配空间。*/
    .flex .f1 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .flex .f2 {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        -webkit-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }
    .flex .f3 {flex:3;}
    
    /*flex-direction 顺序指定了弹性子元素在父容器中的位置。*/
    .fd-r {flex-direction: row;}
    .fd-rr {flex-direction: row-reverse;}
    .fd-c {
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
    }
    .fd-cr {flex-direction: column-reverse;}
    
    /*内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。*/
    .jc-fs {justify-content: flex-start;}
    .jc-fe {justify-content: flex-end;}
    .jc-c {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
    }
    .jc-sb {justify-content: space-between;}
    .jc-sa {justify-content: space-around;}
    
    /*align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。*/
    .ai-fs {align-items: flex-start;}
    .ai-fe {align-items: flex-end;}
    .ai-c {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
    }
    .ai-b {align-items: baseline;}
    .ai-s {align-items: stretch;}
    
    /*flex-wrap 属性用于指定弹性盒子的子元素换行方式。*/
    .fw-nw {flex-wrap:nowrap;} /*默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。*/
    .fw-w {flex-wrap:wrap ;}
    .fw-nw {flex-wrap:wrap-reverse;} /*反转 wrap 排列。*/
    
    /*align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。*/
    .ac-s {align-content: stretch;}
    .ac-fs {align-content: flex-start;}
    .ac-fe {align-content: flex-end;}
    .ac-c {align-content: center;}
    .ac-sb {align-content: space-between;}
    .ac-sa {align-content: space-around;}
    
    /*排序 order <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。*/
    .flex .order-1 {order: 1;}
    .flex .order-2 {order: 2;}
    .flex .order-3 {order: 3;}
    
    /*align-self 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。*/
    .as-a {align-self:auto;}
    .as-fs {align-self:flex-start;}
    .as-fe {align-self:flex-end;}
    .as-c {align-self:center;}
    .as-b {align-self:baseline;}
    .as-s {align-self:stretch;}
    
    
    .margin-auto{
        margin: auto;
    }
  • 相关阅读:
    CSS实现背景透明,文字不透明(兼容各浏览器)
    JQUERY SCROLL PATH自定义滚动路径
    Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误)
    truffle的调用nodeJs的问题
    Truffle基础篇-Truffle做什么的?怎么安装?
    以太坊智能合约开发笔记
    day02 智能合约
    remix无法安装的解决方案
    基于eth快速发行自己的数字货币
    remix-ide的三种使用方式
  • 原文地址:https://www.cnblogs.com/ooo0/p/7562906.html
Copyright © 2011-2022 走看看