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


Posted in HTML / CSS onMay 12, 2016

Flexible Box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。
几个CSS3的flex弹性盒模型布局的简单例子演示

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.     height100px;   
  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.     /*设置伸缩项目出?的?序。*/  
  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-width800px) {   
  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>  

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

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

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-width600px) {   
  31.         .aside{   
  32.             flex:1 auto;   
  33.         }   
  34.     }   
  35.     @media all and (min-width800px) {   
  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>  

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

HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 #HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 #HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 #HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 #HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 #HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 #HTML / CSS
You might like
用文本作数据处理
2006/10/09 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
家属慰问信
2015/02/14 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS