CSS3弹性盒布局
使用自适应的窗口弹性盒布局
可以使div总宽度等于浏览器宽度，而且可以随着浏览器的改变而改变。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#content{
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #content, #right-sidebar{
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
</div>
</body>
</html>改变元素的显示顺序
box-ordinal-group可以改变各个元素的显示顺序。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
}
#left-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: orange;
}
#content{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #content, #right-sidebar{
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
</div>
</body>
</html>改变元素的排列方向
使用box-orient改变多个元素的排列方向。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
#left-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: orange;
}
#content{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #content, #right-sidebar{
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
</div>
</body>
</html>元素宽度与高度的自适应
虽然使用盒布局时，元素的高度与宽度具有了一定的适应性，但是容器中总还是会留出一大片空白区域。
使用弹性盒布局来消除空白
使用弹性盒布局可以消除盒布局残留的空白问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
*{
box-sizing: border-box;
margin: ;
}
html, body{
width: %;
height: %;
}
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
border: 2px solid black;
width: %;
height: %;
}
#left-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: orange;
}
#content{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
width: 200px;
padding: 20px;
background-color: limegreen;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
</div>
</body>
</html>对多个元素使用box-flex属性
如果每个div元素都有box-flex，那么每个元素的宽高等于容器宽高的1/n。容器的空白部分根据box-flex的属性值进行分配。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
*{
box-sizing: border-box;
margin: ;
}
html, body{
width: %;
height: %;
}
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
border: 2px solid black;
width: %;
height: %;
}
#left-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: orange;
}
#content{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: ;
-webkit-box-ordinal-group: ;
-moz-box-flex: ;
-webkit-box-flex: ;
padding: 20px;
background-color: limegreen;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
<div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div>
</div>
</body>
</html>指定水平方向与垂直方向的对齐方式
可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试</title>
<style>
*{
box-sizing: border-box;
margin: ;
}
html, body{
width: %;
height: %;
}
/*弹性盒布局*/
#container{
display: -webkit-box;
display: -moz-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
border: 2px solid black;
width: %;
height: %;
}
#content{
display: -webkit-box;
display: -moz-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: %;
height: %;
padding: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="content">示例文字。</div>
</div>
</body>
</html>
CSS3弹性盒布局的更多相关文章
- 深入理解 CSS3 弹性盒布局模型
Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...
- CSS3 弹性盒布局
一.伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 二.定义 Flexbox 语法格式: di ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- CSS3弹性盒模型，Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- 响应式布局（CSS3弹性盒flex布局模型）
传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...
- CSS3与弹性盒布局
1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...
随机推荐
- celery简单理解和使用
解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...
- JavaScript DOM编程艺术 笔记（二）语句操作
操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...
- Xshell和Xftp登陆WSL
参考:https://zhuanlan.zhihu.com/p/34950508 关键步骤: 1. 下载Xshell和Xftp 2. 拷贝ssh配置文件 sudo cp /etc/ssh/sshd_ ...
- Angular material mat-icon 资源参考_Editor
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- Tr A(矩阵快速幂)
A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. Input 数据的第一行是一个T,表示有T组数据. 每组数据的第一行有n(2 <= n < ...
- 针对ACM输出格式的一个小技巧（对格式错误说不！）
printf("%d%c",bmax," \n"[i==n]); 上文中bmax为题目中需要输出的整形变量,可以脑补很多ans,max之类的,重点在于%c和后面 ...
- [转] Java 命令行交互-JCommander
[From] https://github.com/Sayi/sayi.github.com/issues/32 我喜欢简单,什么是简单?正如若干字符组成的命令行. 有时候我们用Java开发了一个小工 ...
- maven 可执行jar maven-shade-plugin
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...
- mysql 设置默认时间为now()
TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...
- Docker 镜像加速
通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本地用户现在将会享受到更快的下载速度和更强的稳定性,从而能够更敏捷地开发和交付 Docker ...