zoukankan      html  css  js  c++  java
  • 弹性盒模型,flex

    1、定义盒模型的主轴方向,flex-direction

    flex-direction: row;    // 设置主轴方向为水平方向

    flex-direction: column;    // 设置主轴方向为垂直方向

    2、主轴上的元素排列方向

    flex-direction: row-reverse;     // 设置主轴方向为水平,元素排列为反序

    flex-direction: column-reverse;     // 设置主轴方向为垂直,元素排列为反序

    3、主轴方向富裕空间的管理, justify-content

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

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

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

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

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

    4、侧轴方向富裕空间的管理,align-items

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

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

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

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

    5、元素弹性空间,在子集设置

    flex-grow: 1;

    6、元素的具体位置设置

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

  • 相关阅读:
    jQuery入门(8):工具
    jQuery入门(2):核心(核心函数,对象访问,多库共存)
    jQuery入门(6):Ajax
    jQuery入门(7):效果
    jQuery入门(4):CSS相关API
    threadwait/sleep
    【转】Query的extend扩展方法使用点滴
    jquery.query2.1.7.js 操作url
    zhuan
    通用分页存储过程 采用ROW_NUMBER(),支持2005及以后的版本
  • 原文地址:https://www.cnblogs.com/haishen/p/10984953.html
Copyright © 2011-2022 走看看