CCS box-flex属性

最新推荐文章于 2022-11-29 17:09:10 发布

weixin_30670965

最新推荐文章于 2022-11-29 17:09:10 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qingxd/p/5548447.html

本文深入解析了CSS中弹性布局盒模型（Flexbox）与传统盒子模型的区别，通过具体实例展示了如何使用Flexbox实现元素的按比例分配空间，并详细解释了关键属性及其用法。

box-flex==按比例分配父标签的宽度or高度空间

1、非固定分配

eg.一块地总150平方分配给三孩子，按照2:1:1分
#老大 { 房子-分配: 2; } = 75平
#老二 { 房子-分配: 1; } = 37.5平
#老三 { 房子-分配: 1; } = 37.5平
如果转换成CSS表示就是：
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }
>box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配。

>父元素也是需要添加必要的声明的。看代码

>display:box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。

>Flexbox以95.89％的比率在全球浏览器得到了很好的支持。如果你不考虑IE 10及以下的版本。需要附带私有前缀。就是诸如-moz-, -webkit-之类。

CSS实例

现在把上面的例子CSS实例化，看看在web页面上是个如何的表现：

主要CSS代码如下：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <style>
7. .test_box {
8. display: -moz-box; //父元素的声明or许可
9. display: -webkit-box;
10. display: box; //弹性盒子模型的声明
11. width: 200px;
12. }
13. .list_one {
14. -moz-box-flex: 1;
15. -webkit-box-flex: 1;
16. box-flex: 1;
17. border:1px solid #000;
18. }
19. .list_two{
20. -moz-box-flex: 2;
21. -webkit-box-flex: 2;
22. box-flex: 2;
23. border:1px solid #000;
24. }
25. </style>
26. </head>
27. <body>
28. <div>
29. <div class="test_box">
30. <div class="list list_two">1</div>
31. <div class="list list_one">2</div>
32. <div class="list list_one">3</div>
33. </div>
34. </div>
35. </body>
36. </html>

结果如下：

2、部分定值，剩余再分配

固定一部分50平，剩下的再按照1:2
#老大 { 房子-分配: 2; }
#老二 { 房子-分配: 1; }
#老三 { 房子-分配: 50; }
如果转换成CSS表示就是：
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }
新增CSS样式，完整代码如下

1. .list_three{
2. width:60px;
3. border:1px solid #000;
4. }
6. HTML代码如下：
8. <div>
9. <div class="test_box">
10. <div class="list list_one">1</div>
11. <div class="list list_two">2</div>
12. <div class="list list_three">3</div>
13. </div>
14. </div>