CSS3总结（2）——弹性盒模型

今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。

Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。

Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

创建Flex容器

在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box

.container{
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    display:-ms-flexbox;
}

水平或垂直分布

box-orient定义分布的坐标轴：vertical和horizional。这两个值分别定义盒子垂直显示和水平显示：

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}

<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

下图为垂直分布的：

box-direction 元素排列顺序

Normal：正序
Reverse ：反序

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}

<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

下图为倒序：

box-ordinal-group 设置元素的具体位置

根据box-ordinal-group的值的大小，进行元素的从小到大的排列

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

box-flex 定义盒子的弹性空间

相当于将整个父元素按照子元素各占的比例进行分配。如下面的代码<div>5</div>占得比例为除去<div>1</div>所占的固定宽度300px后，剩余页面宽度的5/（2+3+4+5）

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
/*
	子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 

*/


<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

即便网页宽度有所变化，但是最左边元素所占300px宽度无变化，右边剩余宽度根据其他元素各自的比例进行大小调整。

由此可以进行各种布局，

box-pack 对盒子富裕的空间进行管理

start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:reverse; font-size:20px;color:#fff;-webkit-box-pack:justify;  }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}

<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

justify:

start:

end:

center:

box-align 在垂直方向上对元素的位置进行管理

Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中

html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}

<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

center:

有此可见，用flex可以灵活地进行各种布局，

resize 自由缩放

Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

.box{width:100px;height:100px;background:url(1.jpg);border:5px solid #000; resize:both; overflow:auto;}

<div class="box"></div>

在图片的右下角，可以用鼠标进行拖动，调整背景框的大小，背景也以此显示完全

最后的思维导图：