几个CSS3的flex弹性盒模型布局的简单例子演示

前端  /  管理员 发布于 8年前   203

Flexible Box(弹性盒子)能让页面的分布更合理和方便，
这是之前使用常规的布局方式所做不到的。

XML/HTML Code复制内容到剪贴板

1. <div class="warp">  
2.     <div class="modular">1</div>  
3.     <div class="modular">2</div>  
4.     <div class="modular">3</div>  
5.     <div class="modular">4</div>  
6. </div>  

display:flex和display:box有什么区别？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

CSS Code复制内容到剪贴板

1. /*父级*/  
2. .warp{   
3.     width: 100%;   
4.     height: 100px;   
5.     /*这个是用来定义伸缩容器，是内联还是块取决于设置的值。*/  
6.     /*这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。*/  
7.     /*-------------------------------------------------------------*/  
8.     display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
9.     display: -moz-box; /* Firefox 17- */  
10.     display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
11.     display: -moz-flex; /* Firefox 18+ */  
12.     display: -ms-flexbox; /* IE 10 */  
13.     display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
14.     /*-------------------------------------------------------------*/  
15.     /*一起使用box-align 和 box-pack 属性，对子元素进行居中*/  
16.     -webkit-box-pack:justify;   
17.     -webkit-box-align: ustify;   
18.     -moz-box-pack:justify;   
19.     -moz-box-align:justify;   
20.     box-pack:justify;   
21.     box-align:justify;   
22.     /*-------------------------------------------------------------*/  
23.     /*定义了伸缩项目放置在伸缩容器的方向*/  
24.     flex-direction:row;   
25.     -webkit-flex-direction:row;   
26.     /*定义伸缩容器里是单行还是多行显示*/  
27.     flex-wrap:nowrap;   
28.     /*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/  
29.     flex-flow:row nowrap;   
30.     /*设置伸缩容器在横向方向上的对齐方式。*/  
31.     justify-content:center;   
32.     /*设置伸缩容器在纵向方向上的对齐方式。*/  
33.     align-items:center;   
34.     /*当伸缩容器的纵向还有多余空间时，可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/  
35.     align-content:center;   
36. }      
37. /*子级*/  
38. .warp .modular{   
39.     width:80px;   
40.     height:80px;   
41.     background-color:#eee;   
42.     text-align:center;   
43.     /*设置伸缩项目出F的序。*/  
44.     order:-1;   
45.     /*设置伸缩项目扩展的比例。*/  
46.     flex-grow:1;   
47.     /*设置伸缩项目收缩的比例。*/  
48.     flex-shrink:2;   
49.     /*设置伸缩项目的伸缩基准值。*/  
50.     flex-basis:auto;   
51.     /*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/  
52.     flex:1 2 100px;   
53.     /*用来在单独的伸缩项目上覆写默认的对齐方式。*/  
54.     align-self:center;   
55. }  

直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。

1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

3) CSS的columns在伸缩容器上没有效果。

4) float、clear和vertical-align在伸缩项目上没有效果。

例：移动端导航（居中，左右，自适应居中，自适应竖向排列）

CSS Code复制内容到剪贴板

1. <style type="text/css">   
2.     .nav{   
3.         background:#00BFFF;   
4.         display:-webkit-box;   
5.         display:-moz-box;   
6.         display:-ms-flexbox;   
7.         display:-webkit-flex;   
8.         display:flex;   
9.         -webkit-flex-flow:row wrap;   
10.         /*自适应竖向排列*/  
11.         -webkit-flex-flow:column wrap;   
12.         /* 所有列面向主轴起始位置靠齐 */  
13.         justify-content:flex-start;   
14.         /* 所有列面向主轴终点位置靠齐 */  
15.         justify-content:flex-end;   
16.     }   
17.     .nav a{   
18.         text-decoration:none;   
19.         display:block;   
20.         padding:1em;   
21.         color:#fff;   
22.         /*居中平铺*/  
23.         flex:1;   
24.     }   
25.     @media all and (max-width: 800px) {   
26.         .nav{   
27.             /* 所有列面向主轴两端位置平均分配 */  
28.             justify-content:space-around;   
29.         }   
30.     }   
31. </style>  

XML/HTML Code复制内容到剪贴板

1. <ul class="nav">  
2.     <li><a href="#">1</a></li>  
3.     <li><a href="#">2</a></li>  
4.     <li><a href="#">3</a></li>  
5.     <li><a href="#">4</a></li>  
6. </ul>  

例：移动端常用自适应布局

CSS Code复制内容到剪贴板

1. <style type="text/css">   
2.     .wrapper{   
3.         display:-webkit-box;   
4.         display:-moz-box;   
5.         display:-ms-flexbox;   
6.         display:-webkit-flex;   
7.         display:flex;     
8.         -webkit-flex-flow:row wrap;   
9.         flex-flow:row wrap;   
10.     }   
11.     .wrapper > *{   
12.         padding:10px;   
13.         flex:1 100%;   
14.     }   
15.     .header{   
16.         background:#FF6347;   
17.     }   
18.     .footer{   
19.         background:#90EE90;   
20.     }   
21.     .main{   
22.         background:#00BFFF;   
23.     }   
24.     .aside-1{   
25.         background:#FFD700;   
26.     }   
27.     .aside-2{   
28.         background:#FF69B4;   
29.     }   
30.     @media all and (min-width: 600px) {   
31.         .aside{   
32.             flex:1 auto;   
33.         }   
34.     }   
35.     @media all and (min-width: 800px) {   
36.         .main{   
37.             flex:3 0px;   
38.         }   
39.         .aside-1{   
40.             order:1;   
41.         }    
42.         .main{   
43.             order:2;   
44.         }   
45.         .aside-2{   
46.             order:3;   
47.         }   
48.         .footer{   
49.             order:4;   
50.         }   
51.     }   
52. </style>  

XML/HTML Code复制内容到剪贴板

1. <div class="wrapper">  
2.     <header class="header">顶部</header>  
3.     <article class="main">  
4.         <p>我在中间显示的文字</p>     
5.     </article>  
6.     <aside class="aside aside-1">我在左边显示的文字</aside>  
7.     <aside class="aside aside-2">我在右边显示的文字</aside>  
8.     <footer class="footer">底部</footer>  
9. </div>