CSS3弹性伸缩布局

布局简介CSS3提供一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有各种改动，浏览器的兼容性还存在问题。所以，本节课作为初步了解即可。

首先，第一步：先创建一段内容，分成三个区域。

//HTML部分

<div>

<p>第一段内容...</p>

<p>第二段内容...</p>

<p>第三段内容...</p>

</div>

//CSS部分

p{

width:150px;

border:1px solid gray;

background-color:silver;

margin:5px;

padding:5px;

}

div{

display:-moz-box;

display:-webkit-box;

display:box;

}

通过以上设置，在除了IE浏览器外，布局实现了水平分布。那么下面，我们就重点研究一下这些属性的含义

旧版本

如果属性和属性值为：display:box，那么就是2009年7月份设定的工作草案，属于旧版本。它面向的是一些早期浏览器的弹性布局方案。首先，我们要将几个需要布局模块的父元素设置一下容器属性display。

box将容器盒模型作为块级弹性伸缩盒显示（旧版本）

inline-box将容器盒模型作为内联级弹性伸缩盒显示（旧版本）

我们知道块级它是占用整行的，类似<div>元素；而内联级不占用整行，类似<span>元素。但是我们设置了整个盒子，他们都不占用，保持一致。

//设置弹性，以火狐为例

div{

display:-moz-box;

}

box-orient属性

box-orient主要实现盒子内部元素的流动方向。

//设置垂直流动

div{-webkit-box-orient:vertical;}

horizontal伸缩项目从左到右水平排列     (3个P排在一行)

vertical伸缩项目从上到下垂直排列        (3个P排在一列)

inline-axis伸缩项目沿着内联轴排列显示   (3个P排在一行)

block-axis伸缩项目沿着块轴排练显示      (3个P排在一列)

box-directionbox-direction

属性主要是设置伸缩容器中的流动顺序。

//设置逆序

div{-moz-box-direction:reverse;}

normal默认值，正常顺序  （p1、p2、p3）

reverse逆序     （p3、p2、p1）

box-packbox-pack

属性用于伸缩项目的分布方式,必须设置宽度(100%)

//分布方式已结束位置靠齐

div{-moz-box-pack:end;}

start伸缩项目以起始点靠齐  （左边靠齐）

end伸缩项目以结束点靠齐     （右边靠齐）

center伸缩项目以中心点靠齐  （中间靠齐，P1在左，p3在右，p1和p2，p3和p2有可能有空档）

justify伸缩项目平局分布，-webkit-支持，-moz-不支持

box-align

box-align属性用来处理伸缩容器的额外空间。

//居中对齐，清理上下额外空间

div{-moz-box-align:center;}

start伸缩项目以顶部为基准，清理下部额外空间（背景色为白，div为灰，下部变白）

end伸缩项目以底部为基准，清理上部额外空间    （背景色为白，div为灰，上部部变白）

center伸缩项目以中部为基准，平均清理上下部额外空间

baseline伸缩项目以基线为基准，清理额外的空间

stretch伸缩项目填充整个容器，默认            

box-flexbox-flex

属性可以使用浮点数分配伸缩项目的比例

//设置每个伸缩项目占用的比例

p:nth-child(1){

-moz-box-flex:1;   //宽度相当于20%

}

p:nth-child(2){

-moz-box-flex:3;   //宽度相当于60%

}

p:nth-child(3){

-moz-box-flex:1;   //宽度相当于20%

}

box-ordinal-group

box-ordinal-group属性可以设置伸缩项目的显示位置。

//将第一个位置的元素，跳转到第三个位置

p:nth-child(1){

-moz-box-ordinal-group:3;

}

p {

    width: 150px;

    border: 1px solid gray;

    background-color: silver;

    margin: 5px;

    padding: 5px;

}

 

div {

    width: 100%;

    display: -moz-box;

    display: -webkit-box;

    display: box;

 

    /*-moz-box-orient: vertical;*/

    /*-moz-box-orient: inline-axis;*/

    /*-moz-box-orient: block-axis;*/

 

    /*-moz-box-direction: reverse;*/

 

    /*-moz-box-pack: end;*/

    /*-moz-box-pack: center;*/

    /*-moz-box-pack: justify;*/

    /*-webkit-box-pack: justify;*/

 

    /*-moz-box-align: start;*/

    /*-moz-box-align: end;*/

    /*-moz-box-align: center;*/

    /*-moz-box-align: baseline;*/

 

}

 

p:nth-child(1) {

    -moz-box-flex: 1;

    -moz-box-ordinal-group: 2;

}

p:nth-child(2) {

    -moz-box-flex: 3;

    -moz-box-ordinal-group: 1;

}

p:nth-child(3) {

    -moz-box-flex: 1;

    -moz-box-ordinal-group: 3;

}

<div>

<p>第一段内容...</p>

<p>第二段内容...</p>

<p>第三段内容...</p>

</div>

混合过渡版

混合版本的Flexbox模型是2011年提出的工作草案，主要是针对IE10浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。我们还是采用上一节课的文件，然后使用混合过渡代码，实现IE10的伸缩布局。

首先，设置伸缩盒的display有如下两个属性值：

flexbox将容器盒模型作为块级弹性伸缩盒显示（混合版本）

inline-flexbox将容器盒模型作为内联级弹性伸缩盒显示（混合版本）

//需要IE前缀-ms-

div{

display:-ms-flexbox;

}

flex-direction

flex-direction属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。

//设置从上往下排列

div{-ms-flex-direction:column;}

row设置从左到右排列

row-reverse设置从右到左排列

column设置从上到下排列

column-reverse设置从下到上排列

flex-wrap

flex-wrap属性类似与旧版本中的box-lines，但是box-lines我们没有讲解，原因是没有浏览器支持它。

//设置无法容纳时，自动换行

div{-ms-flex-wrap:wrap;}

nowrap默认值，都在一行或一列显示

wrap伸缩项目无法容纳时，自动换行

wrap-reverse伸缩项目无法容纳时，自动换行，方向和wrap相反

flex-flow

flex-flow属性是集合了排列方向和控制换行的简写形式。

//简写形式

div{-ms-flex-flow:row wrap;}

flex-pack

flex-pack属性和旧版本中的box-pack一样，设置伸缩项目的对其方式。

//按照中心点对齐

div{-ms-flex-pack:center;}

start伸缩项目以起始点靠齐

end伸缩项目以结束点靠齐

center伸缩项目以中心点靠齐

justify伸缩项目平局分布

flex-align

flex-align属性和旧版本中的box-align一样，处理伸缩项目容器的额外空间。

//处理额外空间

div{

-ms-flex-align:center;

}

start伸缩项目以顶部为基准，清理下部额外空间

end伸缩项目以底部为基准，清理上部额外空间

center伸缩项目以中部为基准，平均清理上下部额外空间

baseline伸缩项目以基线为基准，清理额外的空间

stretch伸缩项目填充整个容器，默认

flex

flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。

//设置比例分配

p:nth-child(1){

-ms-flex:1;

}

p:nth-child(2){

-ms-flex:3;

}

p:nth-child(3){

-ms-flex:1;

}

flex-order

flex-order属性和box-ordinal-group属性一样控制伸缩项目出现的顺序。

//设置伸缩项目顺序

p:nth-child(1){

-ms-flex-order:2;

}

p:nth-child(2){

-ms-flex-order:3;

}

p:nth-child(3){

-ms-flex-order:1;

}

新版本

新版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。首先，设置伸缩盒的display有如下两个属性值：

flex将容器盒模型作为块级弹性伸缩盒显示（新版本）

inline-flex将容器盒模型作为内联级弹性伸缩盒显示（新版本）

//大部分不需要前缀

div{

display:flex;

}

flex-direction

flex-direction属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。

//设置从上往下排列

div{flex-direction:column;}

row设置从左到右排列

row-reverse设置从右到左排列

column设置从上到下排列

column-reverse设置从下到上排列

flex-wrap

flex-wrap属性类似与旧版本中的box-lines，但是box-lines我们没有讲解，原因是没有浏览器支持它。

//设置无法容纳时，自动换行

div{-ms-flex-wrap:wrap;}

nowrap默认值，都在一行或一列显示

wrap伸缩项目无法容纳时，自动换行（本来是p1、p2、p3，浏览器缩小时，变成2行，p1、p2一行，p3一行，或者3行，p1、p2、p3各一行）

wrap-reverse伸缩项目无法容纳时，自动换行，方向和wrap相反

flex-flow

flex-flow属性是集合了排列方向和控制换行的简写形式。

//简写形式

div{flex-flow:row wrap;}

justify-content

justify-content属性和旧版本中的box-pack一样，设置伸缩项目的对其方式。

//按照中心点对齐

div{justify-content:space-around;}

flex-start伸缩项目以起始点靠齐

flex-end伸缩项目以结束点靠齐

center伸缩项目以中心点靠齐

space-between伸缩项目平局分布

space-around同上，但两端保留一半的空间

align-items

align-items属性和旧版本中的box-align一样，处理伸缩项目容器的额外空间。

//处理额外空间

div{align-itmes:center;}

flex-start伸缩项目以顶部为基准，清理下部额外空间

flex-end伸缩项目以底部为基准，清理上部额外空间

center伸缩项目以中部为基准，平均清理上下部额外空间

baseline伸缩项目以基线为基准，清理额外的空间

stretch伸缩项目填充整个容器，默认

align-self

align-self和align-items一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes一致。

//单独设置清理额外空间

p:nth-child(2){

align-self:center;

}

flex

flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。

//设置比例分配

p:nth-child(1){

flex:1;

}

p:nth-child(2){

flex:3;

}

p:nth-child(3){

flex:1;

}

order

order属性和box-ordinal-group属性一样控制伸缩项目出现的顺序。

//设置伸缩项目顺序

p:nth-child(1){

order:2;

}

p:nth-child(2){

order:3;

}

p:nth-child(3){

order:1;

}

 

 

p {

    width: 150px;

    border: 1px solid gray;

    background-color: silver;

    margin: 5px;

    padding: 5px;

}

 

div {

    width: 100%;

 

    display: flex;

 

    /*flex-direction: column;*/

    /*flex-direction: row-reverse;*/

 

    /*flex-wrap: wrap;*/

 

    /*flex-flow: row wrap;*/

 

    /*justify-content: center;*/

    /*justify-content: flex-end;*/

    /*justify-content: space-between;*/

    /*justify-content: space-around;*/

 

    /*align-items: center;*/

}

 

p:nth-child(1) {

    flex: 1;

    order: 3;

}

p:nth-child(2) {

    /*align-self: center;*/

    flex: 3;

    order: 2;

}

p:nth-child(3) {

    flex: 1;

    order: 1;

}