flex布局学习

最新推荐文章于 2025-06-13 15:15:30 发布

转载最新推荐文章于 2025-06-13 15:15:30 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanqingcui/p/10845980.html

本文深入解析CSS中的Flex布局，对比display:flex与display:inline-flex的区别，同时讲解了box-sizing的content-box与border-box模式，帮助读者理解并掌握弹性布局的特性。

display属性设置弹性布局

flex：将对象作为弹性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒显示

两者的区别

参考：https://www.jb51.net/css/520392.html

 1 <style>
 2     .container{
 3         /* width:200px; */
 4         display: flex;
 5         border: 1px solid;
 6     }
 7     .container> div{
 8         width:50px;
 9         height:50px;
10         border: 1px solid red;
11         box-sizing: border-box;
12     }
13 </style>
14 <body>
15     <!-- 注意：设为flex布局后，子元素的float,clear,vertical-aligin属性将会失效 -->
16     <!-- Webkit内核的浏览器，必须加上-webkit前缀。 -->
17        <div class="container">
18             <div>1</div>
19             <div>1</div>
20             <div>1</div>
21             <div>1</div>
22             <div>1</div>
23        </div>
24   </div>
25 </body>

使用display:flex效果是这样

使用display:inline-flex效果是这样

，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。在没有测试之前，有的人可能会认为.container会占据整个一行，但是，测试结果是，它会根据子元素所有的div大小自适应宽度和高度

上面这里用到border-sizing,那我们来看下box-sizing:content-box 和 box-sizing:border-box，content-box被称为正常盒子模型，border-box被称为怪异盒子模型

border-box限定了盒子模型的总面积

这里的维度计算为： width = border + padding + 内容的 width， height = border + padding + 内容的 height。

当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding。

当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容

红色的部分是内容

box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。

转载于:https://www.cnblogs.com/wanqingcui/p/10845980.html