zoukankan      html  css  js  c++  java
  • CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction。

    1、box-origent: 水平或垂直分布。

    box-origent有两个值:horizional(水平)和vertical(垂直),意思就是元素的排列方式!

    css代码如下:

    body {
    display: -webkit-box;

    -webkit-box-orient: horizional;

    }

    水平排列方式如下:

    body {
    display: -webkit-box;

    -webkit-box-orient: vertical;

    }

    垂直排列方式如下:

    2、box-direction:反向分布

    box-direction也有两个值 normal(正常)和reverse(反向),当然如果使用的时候当然一般都是为了reverse的!该属性的作用就是把本来 由1-2-3排列的元素倒过来变成:3-2-1


    注意:无论是box-orient还是box-direction都需是在父元素中定义而决定子元素的排列的,而且他们起作用的前提是display:box 必须将display的值设置成box,否则是不会生效的,还有不同浏览器必须加上前缀(-webkit-、-moz-、-o-、-ms- 等等)。

    3、除了box-direction能够实现反向分布外,还有一个更具体的公布方法,是定义在每个子元素的属性,它甚至可以决定任何的排列顺序,1-3-2,3-1-2...都可以,那就是 box-ordinal-group ,

    它的值是从1开始的正整数,值越小便排得超前面!

    css代码如下:

    .box1{-webkit-box-ordinal-group:1}

    .box2{-webkit-box-ordinal-group:3}

    .box3{-webkit-box-ordinal-group:2}

  • 相关阅读:
    Flex 布局语法教程
    Uni-App
    springBoot框架中几个层(dto、dao、service、controller)之间的关系
    delphi Restful:客户端实现的四种方式及其比较
    Node.js安装及环境配置之Windows篇
    MySQL 8.0.18安装教程(windows 64位)
    JDK下载和安装
    【转载】G1垃圾回收器详解
    【转载】单线程Redis性能为何如此之高?
    快速开发框架天梭(Tissot)
  • 原文地址:https://www.cnblogs.com/garfieldzhong/p/4655924.html
Copyright © 2011-2022 走看看