zoukankan      html  css  js  c++  java
  • flex 简单设置

    /*弹性盒子 start*/
    /* ============================================================
    flex:定义布局为盒模型
    flex-v:盒模型垂直布局
    flex-1:子元素占据剩余的空间
    flex-align-top: 子元素垂直置顶
    flex-align-center:子元素垂直居中
    flex-pack-center:子元素水平居中
    flex-pack-justify:子元素两端对齐
    兼容性:ios 4+、android 2.3+、winphone8+
    ============================================================ */
    .flex {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    .flex-v {-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
    .flex-1 {-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
    .flex-wrap {-webkit-flex-wrap: wrap;flex-wrap: wrap;}
    .flex-align-top {-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start; }
    .flex-align-center {-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    .flex-pack-center {-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
    .flex-pack-justify {-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
    .flex-wrap {-webkit-flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
    /*弹性盒子 end*/
  • 相关阅读:
    vue中webpack和less填坑:项目运行起来报错TypeError: this.getOptions is not a function
    js避坑历险记
    npm -S -D -g i 有什么区别
    Java 中无返回值的方法在使用时应该注意的问题
    java中方法的重载和覆盖
    Java中的内存划分
    git常用操作
    java代码书写易犯错误
    Java基础知识了解
    粘性定位position:sticky
  • 原文地址:https://www.cnblogs.com/init-007/p/11428950.html
Copyright © 2011-2022 走看看