zoukankan      html  css  js  c++  java
  • web移动端-弹性盒模型

    (父元素加) : 

    /*新版弹性盒模型*/
    /* display: flex; */
    /*设置主轴方向为水平方向*/
    /* flex-direction: row; */
    /*设置主轴方向为垂直方向*/
    /* flex-direction: column; */


    /*老版弹性盒模型*/
    /* display: -webkit-box; */
    /*设置主轴方向为水平方向*/
    /* -webkit-box-orient: horizontal; */
    /*设置主轴方向为垂直方向*/
    /* -webkit-box-orient: vertical; */

    /*新版弹性盒模型*/
    /*display: flex;*/
    /*设置主轴方向为水平,元素排列为反序*/
    /*flex-direction: row-reverse;*/
    /*设置主轴方向为垂直,元素排列为反序*/
    /*flex-direction: column-reverse;*/

    /*老版弹性盒模型*/
    display: -webkit-box;
    /*设置主轴方向为水平方向*/
    /*-webkit-box-orient: horizontal;*/
    /*设置主轴方向为垂直方向*/
    /*-webkit-box-orient: vertical;*/

    /*元素在主轴上排列为反序*/
    /*-webkit-box-direction: reverse;*/
    /*元素在主轴上排列为正序*/
    /*-webkit-box-direction: normal;*/

    /*新版弹性盒模型*/
    display: flex;
    /*元素在主轴开始位置 ,富裕空间在主轴的结束位置*/
    /*justify-content: flex-start;*/

    /*元素在主轴结束位置,富裕空间在主轴开始位置*/
    /*justify-content: flex-end;*/

    /*元素在主轴中间,富裕空间在主轴两侧*/
    /*justify-content: center;*/

    /*富裕空间平均分配在每两个元素之间*/
    /*justify-content: space-between;*/

    /*富裕空间平均分配在每个元素两侧*/
    /*justify-content: space-around;*/

    /*老版弹性盒模型*/
    display: -webkit-box;
    /*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
    /*-webkit-box-pack: start;*/

    /*元素在主轴结束位置,富裕空间在主轴开始位置*/
    /*-webkit-box-pack: end;*/

    /*元素在主轴中间,富裕空间在主轴两侧*/
    /*-webkit-box-pack: center;*/

    /*富裕空间平均分配在每两个元素之间*/
    /*-webkit-box-pack: justify;*/

    车轴上富裕空间管理 : 

    /*新版弹性盒模型*/
    /*display: flex;*/
    /*元素在侧轴开始位置,富裕空间在侧轴结束位置*/
    /*align-items: flex-start;*/

    /*元素在侧轴结束位置,富裕空间在侧轴开始位置*/
    /*align-items: flex-end;*/

    /*元素在侧轴中间位置,富裕空间在侧轴两侧*/
    /*align-items: center;*/

    /*根据侧轴方向上文字的基线对齐*/
    /*align-items: baseline;*/


    /*老版弹性盒模型*/
    /*display: -webkit-box;*/
    /*元素在侧轴开始位置,富裕空间在侧轴结束位置*/
    /*-webkit-box-align: start;*/

    /*元素在侧轴结束位置,富裕空间在侧轴开始位置*/
    /*-webkit-box-align: end;*/

    /*元素在侧轴中间位置,富裕空间在侧轴两侧*/
    /*-webkit-box-align: center;*/

    元素弹性空间 : (给子元素加)

    /*新版*/
    /*flex-grow: 1;*/

    /* 数值越小越靠前,可以接受0 或者负值 */
    order:5;


    /*老版*/
    -webkit-box-flex:1;

    /* 数值越小越靠前, 最小值默认处理为1*/

    -webkit-box-ordinal-group:-2;

  • 相关阅读:
    编程语言最终的目标
    浅谈编程语言的类型系统
    编程语言的五大系统
    Java Array、List、Set互相转化
    java 集合类 列表
    Java检查异常、非检查异常、运行时异常、非运行时异常的区别
    java 的枚举变量只能使用枚举常量来初始化--带有关联数据的枚举
    观察与思考

    种田与投资
  • 原文地址:https://www.cnblogs.com/week-1/p/6593684.html
Copyright © 2011-2022 走看看