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& ...
随机推荐
- Opencv ValueError: not enough values to unpack (expected 3, got 2)解决办法
问题背景 有些人在用我去年的毕设运行时(感谢QAQ),报错 Opencv ValueError: not enough values to unpack (expected 3, got 2) 当时就 ...
- SPOJ - COT 路径构造主席树
题意:给出一个带权树,多次询问路径\((u,v)\)的第k小权值 这是主席树往区间扩展到树上的套路题 由于是按路径查询,我们无法使用dfs序,但可利用主席树对父亲扩展的方法构造出链 因此要用dfs构造 ...
- 接上篇—用spring注入DBbean，并使用maven管理
接着上篇的登陆功能,用spring的依赖注入和maven的管理,又实现了一遍.新增了注册功能. 有两个目标:使用spring和使用maven 目录结构 首先是目标1:使用spring的依赖注入,注入b ...
- HTML基础信息笔记
HTML 是什么 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 标签(tag) HTML 标签是由尖括号包围的关键词,比如 <html> ...
- portmap安装
- storm（4）-topology的组成-stream/spout/blot/
topology包含:stream.spout.blot. topology会一直运行,除非进程被杀死. 1.stream stream=tuple=event(CEP中的)=发送的报文.键值对(一个 ...
- 如何去除内联元素（inline-block元素）之间的间距
<body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...
- Word常用定义的变量
unit U_WordConst; interface {*******Word窗体状态************} const wdWindowStateNormal = $00000000; ...
- CentOS下安装官方RPM包的MySQL后找不到my.cnf
PS:昨天一同事问我说他用MySQL 5.5官方的rpm包安装了,但是在/etc/下面没有my.cnf配置文件.官方rpm包安装的mysql默认确实是没有/etc/my.cnf. 为什么没有这个文件而 ...
- Robot Framework的安装、更新与卸载
Robot Framework的安装.更新与卸载 一,安装RF前的准备 一般就三种执行环境 Python, Jython (JVM) 和 IronPython (.NET): 安装python: #T ...