css3 弹性盒模型（三）

最新推荐文章于 2022-08-25 14:29:09 发布

Mr_lwb

最新推荐文章于 2022-08-25 14:29:09 发布

阅读量471

点赞数 1

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

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

版权

Css3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

flex,box 讲解

元素弹性空间

#demo{
    height:200px;
    border:1px solid #000;
    /*新版的弹性盒模型*/
    display:flex; 

   /*老版的弹性盒模型*/
   /* display:-webkit-box; */
}
#demo div{
    width:50px;
    height:50px;
    background:red;
    text-align:center;
}
#demo div:nth-of-type(2){
    width:200px;
}

新版下 flex-grow添加到子元素中
/*可以把元素平均分配大小一样,同时元素默认设置的大小失效*/
#demo div{
     flex-grow:1;
}

/*当每个元素设置flex-grow : 1, 单独设置某一个元素宽度时，这个元素会比其它元素都大*/
#demo div:nth-of-type(2){
    width:200px;
 }

#demo div:nth-of-type(2){
    width:200px;
    flex-grow:2;
 }

/*老版box下 的分配相同大小类似新版*/
#demo div{
 -webkit-box-flex:1;
}

<!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;  */

   /*老版的弹性盒模型*/
   display:-webkit-box; 

}
#demo div{
    /*新版下 flex-grow添加到子元素中*/
    /*可以把元素平均分配大小一样,同时元素默认设置的大小失效*/
    /* flex-grow:1; */
    /*老版-webkit-box 下 -webkit-box-flex添加到子元素中*/
    /*可以把元素平均分配大小一样,同时元素默认设置的大小失效*/
    -webkit-box-flex:1;
    width:50px;
    height:50px;
    background:red;
    text-align:center;
}
#demo div:nth-of-type(2){
   /*  width:200px;
   flex-grow:2; */
 }
</style>
</head>
<body>

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


</body>
</html>

元素具体位置设置

在新版flex下 order使用数值越小越靠前，可以接受0 和负值

在旧版box下 -webkit-box-ordinal-group 使用数值越小越靠前，可以接受0 和负值，但会默认把0 和负值转化为1 来排序

#demo div:nth-of-type(1){
    /* order:0; */
    -webkit-box-ordinal-group:0;
 }
 #demo div:nth-of-type(2){
    /* order:4; */
    -webkit-box-ordinal-group:4;
 }  
 #demo div:nth-of-type(3){
    /* order:2 */
    -webkit-box-ordinal-group:2;
 }
 #demo div:nth-of-type(4){
    /* order:3; */
    -webkit-box-ordinal-group:3;
 }

<!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;   */

   /*老版的弹性盒模型*/
   display:-webkit-box; 

}
#demo div{
    width:50px;
    height:50px;
    background:red;
    text-align:center;
}
#demo div:nth-of-type(1){
    /* order:0; */
    -webkit-box-ordinal-group:0;
 }
 #demo div:nth-of-type(2){
    /* order:4; */
    -webkit-box-ordinal-group:4;
 }  
 #demo div:nth-of-type(3){
    /* order:2 */
    -webkit-box-ordinal-group:2;
 }
 #demo div:nth-of-type(4){
    /* order:3; */
    -webkit-box-ordinal-group:3;
 }
</style>
</head>
<body>

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


</body>
</html>

Mr_lwb

关注

1
点赞
踩
1

收藏

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

flex,box 讲解元素弹性空间 display:flex; 案例代码#demo{ height:200px; border:1px solid #000; /*新版的弹性盒模型*/ display:flex; /*老版的弹性盒模型*/ /* display:-webkit-box; */
复制链接

扫一扫

专栏目录