css中box-pack属性的使用方法

这篇文章主要介绍了css中box-pack属性的使用方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

站在用户的角度思考问题，与客户深入沟通，找到江阴网站设计与江阴网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖江阴地区。

css box-pack属性定义及用法

1.box-pack属性是css3新增属性，是使用来规定当框大于子元素的尺寸，在何处放置子元素，目前主流浏览器都还不支持该属性，但是一些浏览器有自己的私有属性来实现box-pack属性的效果。

2.Internet Explorer 10可以使用-ms-flex-pack property属性来代替支持box-pack属性，Internet Explorer 10之前版本不支持该属性。Firefox内核浏览器可以通过私有属性-moz-box-pack属性来代替支持box-pack属性。Safari、Opera以及Chrome浏览器可以通过私有属性 -webkit-box-pack属性来代替支持box-pack属性；

css box-pack属性语法格式

box-pack: start/end/center/justify;

属性值说明

start ：对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）

end：对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）

center：额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素

justify：额外的空间平均分配给每个子元素

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-pack属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:center;/* W3C */
-ms-flex-pack:center;/* Internet Explorer 10 */
-moz-box-pack:center;/* Firefox */
-webkit-box-pack:center;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:justify;/* W3C */
-ms-flex-pack:justify;/* Internet Explorer 10 */
-moz-box-pack:justify;/* Firefox */
-webkit-box-pack:justify;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

运行结果

感谢你能够认真阅读完这篇文章，希望小编分享css中box-pack属性的使用方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!

本文名称：css中box-pack属性的使用方法
分享链接：https://www.cdcxhl.com/article4/pdggie.html

成都网站建设公司_创新互联，为您提供小程序开发、网站导航、服务器托管、商城网站、App开发、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容