<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒布局</title>
<style>
div {
height: auto;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

div.wrapper {
width: auto;
display: -webkit-box;
display: -moz-box;
/*box-flex生效需定义其父元素display为box或inline-box*/
background-color: rgba(153, 130, 255, 0.49);
}

div.left {
/*width: 200px;*/
-webkit-box-flex: 2;
-moz-box-flex: 2;
background: #52ffaf;
/*改变元素的显示顺序*/
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
}

div.center {
/*width:; 设置box-flex时不能设置宽度*/
-webkit-box-flex: 1;/*表示分配父元素剩余空白空间的份数，越大越好？*/
-moz-box-flex: 1;
background-color: #ff7efa;
/*改变元素的显示顺序*/
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
}

div.right {
width: 250px;
background-color: #8879e0;
/*改变元素的显示顺序*/
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
}
.packalign{
width: 300px;
height:300px;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
background: #34466e;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
font: bold 24px "微软雅黑";
color: #fff;
}
</style>
</head>
<body>
<div class="packalign">
中
</div>
<h1>学习列表</h1>
<ul>
<li>display:-webkit-box | -moz-box;盒布局</li>
<li>-webkit-box-flex | -moz-box-flex;弹性盒布局</li>
<li>-webkit-box-ordinal-group | -moz-box-ordinal-group;改变元素排列顺序</li>
<li>-webkit-box-orient | -moz-box-orient;改变元素排列方向：垂直|水平</li>
<li>-webkit-box-pack | -moz-box-pack;垂直方向上，元素排列位置</li>
<li>-webkit-box-align | -moz-box-align;水平方向上，元素排列位置</li>
<li>align和pack结合使用，可以让元素中的内容在元素正中央显示</li>
</ul>
<div class="wrapper">
<div class="left">
1html中我在最左边<br/><p></p>
1每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）
</div>
<div class="center">
2html中我在中间<br/>
<p></p>
2每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）
</div>
<div class="right">
3html中我在最右边<br/><p></p>
3每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）
</div>
</div>

</body>
</html>

CSS3-box-flex弹性盒布局的更多相关文章

  1. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  2. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  3. 【flex弹性盒布局】------这个强大的功能

    你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...

  4. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  5. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  6. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  7. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  8. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  9. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  10. CSS3与弹性盒布局

    1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...

随机推荐

  1. js的数组

    转载:http://blog.163.com/sammer_rui/blog/static/846200442010717900634/ https://developer.mozilla.org/z ...

  2. [BZOJ 1260][CQOI2007]染色（DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1260 分析: f[i][j]表示i~j刷成s[i]~s[j]这个样子需要的最小次数 则 ...

  3. ElasticSearch入门系列（五）数据

    序言:无论程序如何写,最终都是为了组织数据为我们服务.在实际应用中,并不是所有相同类型的实体的看起来都是一样的.传统上我们使用行和列将数据存储在关系型数据库中相当于使用电子表格,这种固定的存储方式导致 ...

  4. 【心得】怪异的JS的Date函数

    我们知道new Date('2013/1/1')是2013年1月1日, 那么new Date('2013/1/366')会报无效日期格式吗?答案是,这是一个有效的日期,但是他是表示2014年1月1日. ...

  5. android 布局之scrollview

    今天在布局页面的时候后犯了难,我要显示的内容一个页面展示不完,怎么办呢? 于是随便找了个app点开一看,哎呀原来还能翻动啊!这是啥布局呢?原来是ScrollView 官方api相关的内容全是英文,这可 ...

  6. 新的博客 bincoding.github.io

    最近周围的人都在用静态博客,随主流也换了github page搭建hexo. bincoding.github.io 个人网站,用来上线乱七八糟的东西: bincoding.cn

  7. 【BZOJ 4517】【SDOI 2016 Round1 Day2 T2】排列计数

    本蒟蒻第一次没看题解A的题竟然是省选$Round1$ $Day2$ $T2$ 这道组合数学题. 考试时一开始以为是莫队,后来想到自己不会组合数的一些公式,便弃疗了去做第三题,,, 做完第三题后再回来看 ...

  8. mxnet(1)生成RecordIO与lst文件

    (markdown是用jupypter notebook生成) mxnet为的提高IO效率, 不会直接读取图片文件, 而是先将图片列表和标签转换为RecordIO格式的二进制文件, 训练时就可以顺序读 ...

  9. 控件（文本类）: TextBox, PasswordBox

    介绍背水一战 Windows 10 之 控件(文本类) TextBox PasswordBox 示例1.TextBox 的示例 1Controls/TextControl/TextBoxDemo1.x ...

  10. 查看mysql语句运行时间

    show profiles 之类的语句来查看 mysql> show profiles; Empty set mysql> show variables like "%pro%& ...