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& ...
随机推荐
- c++11 enable_shared_from_this
本质的原因:raw data和引用计数的管理块,可能是分开的 使用场景: 需要在对象中得到shared ptr, 错误的代码:直接构造新的shared_ptr<A>对象,两个shared ...
- 编程开发之--Oracle数据库--存储过程和存储函数（1）
1.存储过程和存储函数 描述:指存储在数据库中供所有用户程序调用的子程序叫做存储过程.存储函数 区别:存储函数可以通过return子句返回一个函数的值 (1)存储过程 语法:create [or re ...
- Linux基本结构
Linux 的基本目录结构: 基本介绍: Linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录“/”,然后再次目录下载创建其他的目录. 经典的一句话:linu ...
- python脚本中appium的自启动自关闭
前提:已安装appium命令行版本 将appium的启动及其关闭直接写在脚本中,运行起来会方便很多 创建startAppiumServer.bat 和 stopAppiumServer.bat文件,然 ...
- FreeRTOS-05任务相关API函数
根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 任务相关API函数: 1. main.c /* * */ #include " ...
- python 中mysql数据库的读写
1.读取数据库 import pymysql id=[] name=[] explain=[] db=pymysql.Connection(host=,user="root", p ...
- 那些H5用到的技术（5）——视差滚动效果
前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...
- Delphi对Word的基本操作
一.Delphi程序启动Word 采用CreateOleObjects的方法来启动Word,调用VBA代码,具体实现过程为: 首先使用GetActiveOleObject('Word.Applicat ...
- Cloudera Manager安装之Cloudera Manager 5.6.X安装（tar方式、rpm方式和yum方式） （Ubuntu14.04） （三）
见 Ubuntu14.04下完美安装cloudermanage多种方式(图文详解)(博主推荐) 欢迎大家,加入我的微信公众号:大数据躺过的坑 免费给分享 同时,大家可以关注我的个人 ...
- Node.js中http-server的使用
Node.js中http-server的使用 使用阿里的npm镜像 国外的npm太慢了.查看一下自己使用的源: npm config get registry 应该显示https://registry ...