用Flex实现的百分比布局
来源:互联网 发布:对艺术的知乎 编辑:程序博客网 时间:2024/05/20 06:09
弹性布局在移动端页面非常的有用,弹性布局主要利用的是CSS3的flex属性。
下面分享一个用flex来实现百分比布局的方法,这在移动端中是很常用的一种适配方法。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style type="text/css">
.Grid{
display: flex;
}
.Grid-cell{
flex: 1;
}
.Grid-cell.u-full{
flex: 0 0 100%;
}
.Grid-cell.u-1of2{
flex: 0 0 50%;
}
.Grid-cell.u-1of3{
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4{
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="Grid">
<div class="Grid-cell u-1of4" style="background-color: #2D82FF">1/4</div>
<div class="Grid-cell" style="background-color: #6DDA79">auto</div>
<div class="Grid-cell u-1of3" style="background-color: #46A0CE">1/3</div>
</div>
<p></p>
<div class="Grid">
<div class="Grid-cell" style="background-color: #2D82FF">auto</div>
<div class="Grid-cell u-1of3" style="background-color: #6DDA79">1/3</div>
</div>
<p></p>
<div class="Grid">
<div class="Grid-cell u-1of2" style="background-color: #2D82FF">1/2</div>
<div class="Grid-cell" style="background-color: #6DDA79">auto</div>
<div class="Grid-cell" style="background-color: #46A0CE">auto</div>
</div>
</body>
</html>
程序运行结果:
flex: 0 0 100%;
参数解释:
第一个参数:flex-grow定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
第二个参数:flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
第三个参数:flex-basis定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
参考文献:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
- 用Flex实现的百分比布局
- Android中实现百分比布局的方式
- RelativeLayout实现百分比布局
- 百分比布局的使用
- 百分比布局的使用
- 百分比布局的使用
- iOS xib实现百分比布局
- Android自实现百分比布局
- Android自实现百分比布局
- 用flex实现弹性布局
- Flex布局怎么用--一个图文列表页的实现
- Css表格布局的百分比
- 百分比布局支持的属性
- 关于CSS的百分比布局
- 百分比布局的基本用法
- Android百分比布局的使用
- flex实现经典的sticky footer布局
- 移动Web开发基础-百分比+flex布局方案
- 小测验:停车问题——题解
- Squarefree number
- ASP控件总结(一)
- ...'sessionFactory' or 'hibernateTemplate' is required--报错心得
- Android中TextView的文本内容中指定关键字高亮显示
- 用Flex实现的百分比布局
- HTML5新特性-多线程(Worker SharedWorker)
- zoj 3954 思维+ 码力 training 2
- 欢迎使用CSDN-markdown编辑器
- Physically Based Shading and Image Based Lighting 9
- 哈夫曼树应用——文件压缩
- hdu2617-happy2009
- 在屏幕上打印菱形
- JVM调优总结(九)-新一代的垃圾回收算法