flex：

  • display:-webkit-box | -moz-box;盒布局
  • -webkit-box-flex | -moz-box-flex;弹性盒布局
  • -webkit-box-ordinal-group | -moz-box-ordinal-group;改变元素排列顺序
  • -webkit-box-orient | -moz-box-orient;改变元素排列方向：垂直|水平
  • -webkit-box-pack | -moz-box-pack;垂直方向上，元素排列位置
  • -webkit-box-align | -moz-box-align;水平方向上，元素排列位置
  • align和pack结合使用，可以让元素中的内容在元素正中央显示

利用flex实现水平+垂直绝对居中效果：

三栏弹性布局效果：

 <!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>

效果代码

css笔记 - flex弹性盒布局的更多相关文章

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

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

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

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

  3. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

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

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

  5. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

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

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

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

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

  8. CSS3与弹性盒布局

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

  9. CSS3弹性盒布局方式

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

随机推荐

  1. ActiveX的AssemblyInof.cs文件 IObjectSafety  接口

    ActiveX的AssemblyInof.cs文件 IObjectSafety  接口 [Guid("D4176A17-2A33-4903-8F37-9EBDD7CAFFD3"), ...

  2. 4: ES内执行Groovy脚本，做文档部分更新、执行判断改变操作类型

    ES有内置的Groovy脚本执行内核,可以在命令的Json内嵌入Groovy脚本语句   前提数据:           

  3. MySQL数据库连接报错

    数据库版本8.x和其他版本配置有区别: 1. 驱动依赖和连接 报错: Could not create connection to database server - java mysql conne ...

  4. python 基础（实例1——登陆小游戏）

    一个简单的登陆小游戏,输入用户名和密码,如果和user_passwd.txt中内容匹配,则打印“welcome to login...”,如果三次输入错误则将该用户列入黑名单,无法再用该用户名登陆. ...

  5. text-overflow 全兼容

    text-overflow 全兼容 text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.比起在后台用程序截断文本再附上省略标记的做法,用CSS来 ...

  6. Swift枚举的全用法

    鉴于昨天开会部门会议讨论的时候,发现有些朋友对枚举的用法还是存在一些疑问,所以就写下这个文章,介绍下Swift下的枚举的用法. 基本的枚举类型 来,二话不说,我们先贴一个最基本的枚举: enum Mo ...

  7. [AIR] NativeExtension在IOS下的开发实例 --- IOS项目的创建 (一)

    来源:http://bbs.9ria.com/thread-102037-1-1.html 最近看到本版块的很多关于NativeExtension的应用.但是都是在Android下面的应用.也有很多朋 ...

  8. javascript_16-对象字面量

    JSON与对象字面量相似,仅仅是属性需要使用双引号引号引起. json是描述数据的一种规范 什么是JSON JavaScript Object Notation (JavaScript 对象表示形式) ...

  9. 在Linux主机使用命令行批量删除harbor镜像

     在Linux主机使用命令行批量删除harbor镜像 脚本使用说明: 此脚本不是万能脚本,根据自身环境要调整很多 能用harbor的域名就不要用IP 脚本前半部分可以套用,后半部分需一步一步试错,结合 ...

  10. Lock wait timeout分析

    ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction分析 1.4个用户连接数据库(A和D是本地回环登陆, ...