css3 弹性盒模型（二）

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

Mr_lwb

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

阅读量374

点赞数 1

分类专栏： Css3 文章标签： justify-content webkit-box-pack justify space-between felx

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

版权

Css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

box-flex : 定义盒子的弹性空间

子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素box-flex 属性值的和

新版的弹性盒模型下

display:flex;

/*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
justify-content:flex-start;

/*元素在主轴的结束位置,富裕空间在主轴的开始位置*/
justify-content:flex-end;

/*元素在主轴的中间,富裕空间在主轴的两侧位置*/
justify-content:center;

/*富裕空间平均分配在两个元素之间*/
justify-content:space-between;

/*富裕空间平均分配在每个元素的两侧*/
justify-content:space-around;

老版的弹性盒模型下

display:-webkit-box;

/*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
-webkit-box-pack:start;

/*元素在主轴的结束位置,富裕空间在主轴的开始位置*/
-webkit-box-pack:end;

/*元素在主轴的中间,富裕空间在主轴的两侧位置*/
-webkit-box-pack:center;

/*富裕空间平均分配在两个元素之间*/
-webkit-box-pack:justify;

Demo案例

<!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; */
    /*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
    /* justify-content:flex-start; */
    /*元素在主轴的结束位置,富裕空间在主轴的开始位置*/
    /* justify-content:flex-end;*/
    /*元素在主轴的中间,富裕空间在主轴的两侧位置*/
    /* justify-content:center; */
    /*富裕空间平均分配在两个元素之间*/
    /* justify-content:space-between; */
    /*富裕空间平均分配在每个元素的两侧*/
   /*  justify-content:space-around; */

   /*老版的弹性盒模型*/
   display:-webkit-box;
   /*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
   /* -webkit-box-pack:start; */
    /*元素在主轴的结束位置,富裕空间在主轴的开始位置*/
    /* -webkit-box-pack:end; */
     /*元素在主轴的中间,富裕空间在主轴的两侧位置*/
    /* -webkit-box-pack:center; */
    /*富裕空间平均分配在两个元素之间*/
    -webkit-box-pack:justify;
}
#demo div{
    width:50px;
    height:50px;
    background:red;
    text-align:center;
}
</style>
</head>
<body>

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


</body>
</html>