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& ...
随机推荐
- Ubuntu16.04装机后处理
1.卸载软件 #卸载libreOffice sudo apt remove libreoffice-common #卸载amazon sudo apt remove unity-webapps-com ...
- leetcode-118-Pascal's Triangle（生成具有n行的帕斯卡三角形）
题目描述: Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. Example ...
- spring ThreadPoolTaskExecutor使用总结
ThreadPoolTaskExecutor提供TaskDecorator可以实现类似ThreadPoolExecutor.afterExecute()类似功能 taskDecorator主要是对Ru ...
- 汇编语言_实验四_[bx]和loop的使用
四.实验结论 1. 实验内容1 (1)源代码: assume cs:code code segment mov ax,0b800h mov ds,ax mov bx,07b8h mov c ...
- 构建私有Docker Registry
1.设置insecure-registry: 可能会出现无法push镜像到私有仓库的问题. 这是因为我们启动的registry服务不是安全可信赖的. 1) sudo vim /etc/default/ ...
- 解决JavaScript拖动时同时触发点击事件的BUG
在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...
- MySql下载
一般企业办的mysql下载不到 1.准备 注册一个orcle账号 2.跳转到http://www.mysql.com/ ,然后点击Downloads导航栏 滚动到最下面并点击[Community(GP ...
- C#操作Redis String字符串
/// <summary> /// Redis String 操作 /// </summary> public static void Redis_String() { Red ...
- linux下查看memcache版本
用telnet 127.0.0.1 11211命令连接上memcache, 然后直接输入stats就可以得到memcache服务器的版本
- [转]Using MVC 6 And AngularJS 2 With .NET Core
本文转自:http://www.c-sharpcorner.com/article/using-mvc-6-and-angularjs-2-with-net-core/ CoreMVCAngular2 ...