css3 弹性盒模型（一）

最新推荐文章于 2022-10-06 11:26:56 发布

Mr_lwb

最新推荐文章于 2022-10-06 11:26:56 发布

阅读量367

点赞数 1

分类专栏： Css3 Html5 文章标签： -webkit-box box flex

本文链接：https://blog.csdn.net/u010881899/article/details/56485256

版权

Css3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no" />
<style type="text/css">
*{padding:0;margin:0;}
#demo{
    height:200px;
    border:1px solid #000;
    /*新版的弹性盒模型*/
    display:flex;
    /*新版下设置主轴方向为水平方向*/
    flex-direction:row;
    /*新版下设置主轴方向为垂直方向*/
    flex-direction:column;
    /*新版下设置主轴方西为水平，元素排序为反序，距最后开始*/
    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;
}
#demo div{
    width:50px;
    height:50px;
    background:#eee;
    text-align:center;
}
</style>
</head>
<body>

<div id="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>


</body>
</html>

Mr_lwb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 弹性盒模型（一）

*{padding:0;margin:0;}#demo{ height:200px; border:1px solid #000; /*新版的弹性盒模型*/ display:flex; /*新版下设置主轴方向为水平方向*/ flex-direction:row; /*新版下设置主轴方向为垂直方向*/ flex-direction:c
复制链接

扫一扫

专栏目录