首页 > 代码库 > 弹性盒模型
弹性盒模型
1、注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box
<style>.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;}.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div></body>
2、Box-orient 定义盒模型的布局方向
•Horizontal 水平显示
•vertical 垂直方向
<style>.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div></body>
3、box-direction 元素排列顺序
•Normal 正序
•Reverse 反序
<style>.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div></body>
4、box-ordinal-group 设置元素的具体位置
<style>.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}</style></head><body><div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div></body>
5、Box-flex 定义盒子的弹性空间
•子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
<style>.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}/*子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 */</style></head><body><div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div></body>
6、box-pack 对盒子富裕的空间进行管理
•Start 所有子元素在盒子左侧显示，富裕空间在右侧
•End 所有子元素在盒子右侧显示，富裕空间在左侧
•Center 所有子元素居中
•Justify 富余空间在子元素之间平均分布
弹性盒模型
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。