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

    1,弹性核模型
         新版父级display:flex;
         // 水平 方向 
         flex-direction:row;  
         // 竖直 方向
         flex-direction:colunm;
         
    flex-direction: row-reverse;
    flex-direction: column-reverse;
     
     
    display: flex;
    justify-content: flex-start/flex-end/center/space-between/space-around
     
    justify-content: space-between;
     
    justify-content: space-around;
     
    垂直 :display: flex;  align-items: flex-start/flex-end/center/baseline;
     
    子级弹性空间:flex-grow: num;
    子级排列顺序   order:num;
     
     
    老版display:-webkit-box;
    -webkit-box-orient:horizontal:
    -webkit-box-orient:vertical:
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
     
    display: -webkit-box;
    -webkit-box-pack:start/end/justify/center;
     
     
    -webkit-box-pack:justify;
     
    垂直 :display: -webkit-box; -webkit-box-align: start/end/center;
     
     
    子级弹性空间:-webkit-box:num;
     
    子级排列顺序   -webkit-box-ordinal-group:num;
  • 相关阅读:
    SASS教程sass超详细教程
    浅谈angular2+ionic2
    深入理解JSON对象
    浅谈闭包
    响应式开发入门
    CSS之float属性归纳探讨
    新学期加油
    Good moring!
    async await的前世今生
    ASP.NET配置KindEditor文本编辑器-图文实例
  • 原文地址:https://www.cnblogs.com/vsmart/p/6688173.html
Copyright © 2011-2022 走看看