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& ...
随机推荐
- leetcode-824-Goat Latin（字符串的处理）
题目描述: A sentence S is given, composed of words separated by spaces. Each word consists of lowercase ...
- 分享自建的 Jrebel License Server 激活 Jrebel
使用在线验证服务器激活 Jrebel 与 Idea 说明 代码来自于开源项目: gsls200808 / JrebelLicenseServerforJava 自建的服务地址 http://jrebe ...
- c++primer plus笔记
> 第六版 操作符重载 #include<iostream> using namespace std; class Time { public: Time() { h=m=0; } ...
- css实现渐变
.gradient{ background: -webkit-gradient(linear, 0 0, 0 100%, from(#8ca0d3), to(#375a9a)); /** Chrome ...
- 为什么一定要学Go语言
Go语言是谷歌2009发布的第二款开源编程语言.Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 为什么要选择学习Go ...
- python 封装，隐藏属性，绑定方法classmethod和staticmethod
[封装] 隐藏对象的属性和实现细节,仅对外提供公共访问方式. [好处] 1. 将变化隔离: 2. 便于使用: 3. 提高复用性: 4. 提高安全性: [封装原则] 1. 将不需要对外提供的内容都隐藏起 ...
- genkins的报错排查
[ERROR] /root/.jenkins/workspace/car/src/main/java/com/zhengxin/tool/code/Code.java:[20,64] diamond ...
- Flexbox（弹性盒子）
CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...
- sqoop导数
#!/bin/bash source ExitCodeCheck.shopts=$@getparam(){ echo $opts|xargs -n1|cut -b 2-|awk -v arg=$1 - ...
- 自定义ajax,添加loading效果
自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...