怎么用CSS3中box-orient属性来布局方向

这篇文章主要介绍怎么用CSS3中box-orient属性来布局方向，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业达川免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

    在CSS3弹性盒子模型中，我们可以使用box-orient属性定义弹性盒子内部中“子元素”的排列方向。也就是盒子内部的子元素是横着排，还是竖着走。

    box-orient属性取值如下：

    horizontal弹性盒子“从左到右”在一条水平线上显示它的“子元素”

    vertical弹性盒子“从上到下”在一条垂直线上显示它的“子元素”

    inline-axis弹性盒子“沿着内联轴”显示它的“子元素”（默认值）

    block-axis弹性盒子“沿着块轴”显示它的“子元素”

    注意：在使用之前，用户必须先把父元素的display属性设置为box或者inline-box，弹性盒子模型才会生效。

    举例：

   

    body

    {

    display:-webkit-box;/*定义元素为盒子显示，注意书写*/

    -webkit-box-orient:horizontal;/*定义盒子元素内的元素从左到右流动显示*/

    }

    div{height:100px;}

    #box1{background:red;}

    #box2{background:blue;}

    #box3{background:yellow;}

    盒子1