电话
13363039260
CSS3 什么是弹性盒子？
2024-01-17 13:53 小编
一：什么是弹性盒子
CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
二：CSS3弹性盒子内容
弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。
弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
三：display:box与display:flex的区别和用法
1.display:box主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式
display:box是2009年之前的语法，已经过时，使用是需要加上对应前缀的。
所以兼容性的代码，大致如下
display:-webkit-box;/*Chrome4+,Safari3.1,iOSSafari3.2+*/
display:-moz-box;/*Firefox17-*/
display:-webkit-flex;/*Chrome21+,Safari6.1+,iOSSafari7+,Opera15/16*/
display:-moz-flex;/*Firefox18+*/
display:-ms-flexbox;/*IE10*/
display:flex;
举个例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>弹性盒子--display:box;</title>
<style>
.box{
width:330px;
height:400px;
border:1px#000solid;
margin:0auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-o-box;
display:box;
}
.boxp{
width:100px;
height:20px;
background:#000;
margin:5px;
}
</style>
</head>
<body>
<divclass="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 