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

Hope ·

更新时间:2024-09-21

· 791 次阅读

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

XML/HTML Code复制内容到剪贴板 <div class="warp"> <div class="modular">1</div> <div class="modular">2</div> <div class="modular">3</div> <div class="modular">4</div> </div>

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

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

CSS Code复制内容到剪贴板 /*父级*/ .warp{ width: 100%; height: 100px; /*这个是用来定义伸缩容器，是内联还是块取决于设置的值。*/ /*这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。*/ /*-------------------------------------------------------------*/ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ /*-------------------------------------------------------------*/ /*一起使用box-align 和 box-pack 属性，对子元素进行居中*/ -webkit-box-pack:justify; -webkit-box-align: ustify; -moz-box-pack:justify; -moz-box-align:justify; box-pack:justify; box-align:justify; /*-------------------------------------------------------------*/ /*定义了伸缩项目放置在伸缩容器的方向*/ flex-direction:row; -webkit-flex-direction:row; /*定义伸缩容器里是单行还是多行显示*/ flex-wrap:nowrap; /*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/ flex-flow:row nowrap; /*设置伸缩容器在横向方向上的对齐方式。*/ justify-content:center; /*设置伸缩容器在纵向方向上的对齐方式。*/ align-items:center; /*当伸缩容器的纵向还有多余空间时，可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/ align-content:center; } /*子级*/ .warp .modular{ width:80px; height:80px; background-color:#eee; text-align:center; /*设置伸缩项目出現的順序。*/ order:-1; /*设置伸缩项目扩展的比例。*/ flex-grow:1; /*设置伸缩项目收缩的比例。*/ flex-shrink:2; /*设置伸缩项目的伸缩基准值。*/ flex-basis:auto; /*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/ flex:1 2 100px; /*用来在单独的伸缩项目上覆写默认的对齐方式。*/ align-self:center; }

直接上代码，写了个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复制内容到剪贴板 <style type="text/css"> .nav{ background:#00BFFF; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; /*自适应竖向排列*/ -webkit-flex-flow:column wrap; /* 所有列面向主轴起始位置靠齐 */ justify-content:flex-start; /* 所有列面向主轴终点位置靠齐 */ justify-content:flex-end; } .nav a{ text-decoration:none; display:block; padding:1em; color:#fff; /*居中平铺*/ flex:1; } @media all and (max-width: 800px) { .nav{ /* 所有列面向主轴两端位置平均分配 */ justify-content:space-around; } } </style> XML/HTML Code复制内容到剪贴板 <ul class="nav"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>

2016512120146062.jpg (1074×668)

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

CSS Code复制内容到剪贴板 <style type="text/css"> .wrapper{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; } .wrapper > *{ padding:10px; flex:1 100%; } .header{ background:#FF6347; } .footer{ background:#90EE90; } .main{ background:#00BFFF; } .aside-1{ background:#FFD700; } .aside-2{ background:#FF69B4; } @media all and (min-width: 600px) { .aside{ flex:1 auto; } } @media all and (min-width: 800px) { .main{ flex:3 0px; } .aside-1{ order:1; } .main{ order:2; } .aside-2{ order:3; } .footer{ order:4; } } </style> XML/HTML Code复制内容到剪贴板 <div class="wrapper"> <header class="header">顶部</header> <article class="main"> <p>我在中间显示的文字</p> </article> <aside class="aside aside-1">我在左边显示的文字</aside> <aside class="aside aside-2">我在右边显示的文字</aside> <footer class="footer">底部</footer> </div>

2016512120225379.jpg (872×665)