CSS3 之弹性布局 flex

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出伸缩盒模型草案，该草案主要用于优化UI布局，可以简单地使一个元素居中（包括水平和垂直居中），可以扩大或收缩元素来填充容器的可用空间，可以改变布局顺序等。伸缩盒模型分为旧版本、新版本以及混合过渡版本3种不同的语法规则。其中混合过渡版本主要是针对IE10做了兼容。

旧版模型

知识点

在旧版本中启动伸缩盒模型，只需设置容器的 display 的属性值为 box（或 inline-box）。其基本用法如下：

display: box;
display: inline-box;

伸缩盒模型包括父容器和子容器。

父容器通过 display: box; 或者 display: inline-box; 启动伸缩盒布局功能；子容器通过 box-flex 属性定义布局宽度，以及定义如何对父容器的宽度进行分配。

父容器又通过如下属性定义包含容器的显示属性，各属性简单说明如下：

box-orient：定义父容器里子容器的排列方式，是水平还是垂直；
box-direction：定义父容器里的子容器排列顺序；
box-align：定义子容器的垂直对齐方式；
box-pack：定义子容器的水平对齐方式；

使用 box-ordinal-group 属性可以改变子元素的显示顺序，使用 box-flex 属性可以定义弹性宽度。如果 box-flex 的属性值为1，则元素会变得富有弹性，其大小将按如下方式计算：

声明的大小（width、height、min-width、min-height、max-width、max-height）；
父容器的大小和所有余下的可利用的内部空间；

注意：使用旧版本伸缩盒模型，需要用到各浏览器的私有属性，Webkit引擎支持-webkit-前缀的私有属性，Mozilla Gecko引擎支持-moz-前缀的私有属性，Presto引擎（包括Opera浏览器等）支持标准属性，IE暂不支持旧版本伸缩盒模型；

-webkit-	chrome和safari
-moz-	Firefox
-ms-	IE
-o-	opera

运行实例

本例设计左侧边栏的宽度为240px，右侧边栏的宽度为200px，中间内容板块的宽度将由 box-flex 属性确定。当调整窗口宽度时，中间列的宽度会自适应显示，使整个页面总是满窗口显示。

第一步，新建HTML5文档，设计栏目结构。

<div id="container"><div id="left-sidebar"></div><div id="contents"></div><div id="right-sidebar"></div>
</div>

第二步，在样式表中设计样式组。

#container { display: box;       /*启动弹性盒布局*/
}
#contents { flex: 1;        /*定义中间列宽度为自适应*/
}
#left-sidebar,
#contents,
#right-sidebar {box-sizing: border-box;     /*定义盒样式*/
}

完整代码：

<div id="container"><div id="left-sidebar"><h2>宋词精选</h2><ul><li><a href="">卜算子·咏梅</a></li><li><a href=""> 声声慢·寻寻觅觅</a></li><li><a href=""> 雨霖铃·寒蝉凄切</a></li><li><a href="">卜算子·咏梅</a></li><li><a href="">更多</a></li></ul></div><div id="contents"><h1>水调歌头·明月几时有</h1><h2>苏轼</h2><p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p><p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？</p><p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p></div><div id="right-sidebar"><h2>词人列表</h2><ul><li><a href="">陆游</a></li><li><a href="">李清照</a></li><li><a href="">苏轼</a></li><li><a href="">柳永</a></li></ul></div>
</div>

#container {/*定义弹性盒布局样式*/display: -moz-box;display: -webkit-box;display: box;
}
#left-sidebar {width: 240px;padding: 20px;background-color: orange;
}
#contents {/*定义中间列宽度为自适应显示*/-moz-box-flex: 1;-webkit-box-flex: 1;flex: 1;padding: 20px;background-color: yellow;
}
#right-sidebar {width: 200px;padding: 20px;background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {/*定义盒样式*/-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}

演示效果：

新版模型

知识点

通过设置 display 属性为 flex 或 inline-flex 可以启动新版伸缩模型。基本用法如下：

display: flex | inline-flex;

其中，flex 定义容器为块级元素；inline-flex 定义容器为行内元素。

提示：CSS3 的 columns 属性在伸缩容器上没有效果，同时 float、clear 和 vertical-align 属性在伸缩项目上也没有效果。

伸缩容器包含的属性如下：

flex-direction: row (默认) | row-reverse | column | column-reverse;
[ 定义主轴方向，取值包括 row（横向从左到右排列）、row-reverse（与 row相反）、column（纵向从上往下排列）、column-reverse（与 column 相反）；]
flex-wrap: nowrap (默认) | wrap | wrap-reverse;
[ 定义伸缩容器是不换行 | 换行且第一行在上方 | 换行且第一行在下方显示伸缩项目；]
flex-flow: < flex-direction> < flex-wrap>;
[ flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；]
justify-content: flex-start (默认) | flex-end | center | space-between | space-around;
[ 定义伸缩项目沿着主轴线的对齐方式：左对齐 | 右对齐 | 居中 | 两端对齐且项目之间的间隔都相等 | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。]
align-items: flex-start | flex-end | center | baseline | stretch (默认);
[ 定义伸缩项目在侧轴（交叉轴）上的对齐方式：交叉轴的起点对齐 | 交叉轴的终点对齐 | 交叉轴的中点对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度 ]
align-content: flex-start | flex-end | center | space-between | space-around | stretch (默认);
[ 定义伸缩行在伸缩容器里的对齐方式（如果项目只有一根轴线，该属性不起作用）：与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 与交叉轴的中点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布 | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 | 轴线占满整个交叉轴]

伸缩项目包含的属性如下：

order：控制伸缩项目在伸缩容器中的显示顺序,数值越小，排列越靠前，默认为0；
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；(如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。)
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；（如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。）
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小；（它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间）
flex：是 flex-grow、flex-shrink 和 flex-basis 3个属性的复合属性；（默认值为0 1 auto，后两个属性可选；该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值）
align-self: auto | flex-start | flex-end | center | baseline | stretch;
[ 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；]

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

运行实例

本例以旧版模型的示例结构为基础，使用新版语法设计一个兼容不同设备和浏览器的弹性页面。

第一步，复制示例的文档结构。整个页面被包裹在<div class=“page-wrap” 容器中，容器包含3个子模块。现在将容器定义为伸缩容器，此时每个子模块自动变成了伸缩项目。

<div class="page-wrap"><section class="main-content"></section><nav class="main-nav"></nav><aside class="main-sidebar"></aside>
</div>

本示例设计各列在一个伸缩容器中显示上下文，只有这样这些元素才能直接成为伸缩项目，它们之前是什么没有关系，只要现在是伸缩项目即可。

第二步，启动伸缩布局模型。本示例把 Flexbox 旧的语法、中间混合语法和最新的语法混在一起使用，它们的顺序很重要。display 属性本身并不添加任何浏览器前缀，但用户需要确保老语法不要覆盖新语法，让浏览器同时支持。

.page-wrap {display: -webkit-box;        /*2009版 - iOS 6-, Safari 3.1-6*/display:    -moz-box;       /*2009版 - Firefox 10- (存在缺陷)*/display:     -ms-box;     /*2011版 - IE10*/display: -webkit-flex;      /*最新版 - Chrome*/display: flex;              /*最新版 - Opera 12.1, Firefox 20+*/
}

第三步，设计每个伸缩项目。整个页面包含3列，设计一个20%、60%、20%的网格布局。首先，设置主内容区域宽度为60%；其次，设置侧边栏来填补剩余的空间。这里同样把新、旧语法混在一起使用。

.main-content{-webkit-box-ordinal-group: 2;      /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 2;            /* 2009版 - Firefox 19- */-ms-flex-order: 2;                 /* 2011版 - IE 10 */-webkit-order: 2;                    /* 最新版 - Chrome */order: 2;                         /* 最新版 - Opera 12.1, Firefox 20+ */width: 60%;                         /* 不会自动伸缩,其他列将占据空间 */-moz-box-flex: 1;                  /* 如果没有该声明，主内容（60%）会伸展到和最宽的段落，就像是段落设置了white-space:nowrap */background: white;
}

在新语法中，没有必要给边栏设置宽度，因为它们同样会使用20%的比例填充剩余的40%的空间，但是，如果不显式设置宽度，在旧语法环境中会直接崩溃。

第四步，完成初步布局后，需要重新排列顺序。这里把主内容排列在中间，但在HTML结构之中，它是排列在第一的位置。使用 Flexbox 可以很容易实现，但用户需要把 Flexbox 中几个不同的语法混在一起使用。

.main-content {-webkit-box-ordinal-group: 2;-moz-box-ordinal-group: 2;-ms-flex-order: 2;-webkit-order: 2;order: 2;
}.main-nav {-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;order: 1;
}.main-sidebar {-webkit-box-ordinal-group: 3;-moz-box-ordinal-group: 3;-ms-flex-order: 3;-webkit-order: 3;order: 3;
}

完整代码：

<div class="page-wrap"><section class="main-content"><h1>水调歌头·明月几时有</h1><h2>苏轼</h2><p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p><p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？</p><p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p></section><nav class="main-nav"><h2>宋词精选</h2><ul><li><a href="">卜算子·咏梅</a></li><li><a href=""> 声声慢·寻寻觅觅</a></li><li><a href=""> 雨霖铃·寒蝉凄切</a></li><li><a href="">卜算子·咏梅</a></li><li><a href="">更多</a></li></ul></nav><aside class="main-sidebar"><h2>词人列表</h2><ul><li><a href="">陆游</a></li><li><a href="">李清照</a></li><li><a href="">苏轼</a></li><li><a href="">柳永</a></li></ul></aside>
</div>

.page-wrap {display: -webkit-box;           /* 2009版 - iOS 6-, Safari 3.1-6 */display: -moz-box;              /* 2009版 - Firefox 19- (存在缺陷) */display: -ms-flexbox;           /* 2011版 - IE 10 */display: -webkit-flex;          /* 最新版 - Chrome */display: flex;                  /* 最新版 - Opera 12.1, Firefox 20+ */
}
.main-content {-webkit-box-ordinal-group: 2;   /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 2;      /* 2009版 - Firefox 19- */-ms-flex-order: 2;              /* 2011版 - IE 10 */-webkit-order: 2;               /* 最新版 - Chrome */order: 2;                       /* 最新版 - Opera 12.1, Firefox 20+ */width: 60%;                     /* 不会自动伸缩,其他列将占据空间 */-moz-box-flex: 1;               /* 如果没有该声明，主内容（60%）会伸展到和最宽的段落，就像是段落设置了white-space:nowrap */background: white;
}
.main-nav {-webkit-box-ordinal-group: 1;   /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 1;      /* 2009版 - Firefox 19- */-ms-flex-order: 1;              /* 2011版 - IE 10 */-webkit-order: 1;               /* 最新版 - Chrome */order: 1;                       /* 最新版 - Opera 12.1, Firefox 20+ */-webkit-box-flex: 1;            /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-flex: 1;               /* 2009版 - Firefox 19- */width: 20%;                     /* 2009版语法, 否则将崩溃 */-webkit-flex: 1;                /* Chrome */-ms-flex: 1;                    /* IE 10 */flex: 1;                        /* 最新版 - Opera 12.1, Firefox 20+ */background: #ccc;
}
.main-sidebar {-webkit-box-ordinal-group: 3;   /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 3;      /* 2009版 - Firefox 19- */-ms-flex-order: 3;              /* 2011版 - IE 10 */-webkit-order: 3;               /* 最新版 - Chrome */order: 3;                       /* 最新版, Spec - Opera 12.1, Firefox 20+ */-webkit-box-flex: 1;            /* 2009版 - iOS 6-, Safari 3.1-6 */-moz-box-flex: 1;               /* Firefox 19- */width: 20%;                     /* 2009版，否则将崩溃 */-ms-flex: 1;                    /* 2011版 - IE 10 */-webkit-flex: 1;                /* 最新版 - Chrome */flex: 1;                        /* 最新版 - Opera 12.1, Firefox 20+ */background: #ccc;
}
.main-content, .main-sidebar, .main-nav { padding: 1em; }
body {padding: 2em;background: #79a693;
}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
h1, h2 {font: bold 2em Sans-Serif;margin: 0 0 1em 0;
}
h2 { font-size: 1.5em; }
p { margin: 0 0 1em 0; }

演示效果：

CSS3 弹性布局/伸缩布局 flex相关推荐

CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
学伸缩布局(flex)这一篇文章就够了——伸缩布局的布局思路
什么是伸缩布局伸缩布局又被称为弹性布局,它可以快速实现一些常见的布局,和浮动和定位比起来,他就友好太多了,给子盒子加上宽高,父盒子开启伸缩布局加上一些代码子盒子就可以自己去排列. 如何使用伸缩开启 ...
css3弹性盒子模型之box-flex（--）
今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然 ...
css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
[24]CSS3 弹性伸缩布局(上)
一．布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(FlexibleBox).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C 的草案 ...

CSS3 弹性布局/伸缩布局 flex

CSS3 之弹性布局 flex

旧版模型

知识点

运行实例

新版模型

知识点

基本概念

运行实例

CSS3 弹性布局/伸缩布局 flex相关推荐

最新文章

热门文章

CSS3 弹性布局/伸缩布局 flex

CSS3 之 弹性布局 flex

旧版模型

知识点

运行实例

新版模型

知识点

基本概念

运行实例

CSS3 弹性布局/伸缩布局 flex相关推荐

最新文章

热门文章

CSS3 之弹性布局 flex