css学习18：css3 flex流动自适应响应式布局实例

上次简要的说了一些css3中flex的相关概念（详细：css学习16：css3 flex流动自适应响应式布局设计），这次继续说下css3的flex，简单的举几个实例。(备注safari等浏览器要用 display: -webkit-flex)

一、图片自适应居中

实例图：

实例HTML：

1. <div class="demo">
2. <img src="http://dummyimage.com/100x100" alt="">
3. </div>
5. <div class="demo">
6. <img class="" src="http://dummyimage.com/200x100" alt="">
7. </div>
9. <div class="demo">
10. <img src="http://dummyimage.com/100x200" alt="">
11. </div>
13. <div class="demo">
14. <img src="http://dummyimage.com/200x200" alt="">
15. </div>
17. <div class="demo">
18. <img src="http://dummyimage.com/50x50" alt="">
19. </div>

实例CSS：

.demo{
	width: 100px;
	height: 100px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
	float: left;
	margin-left: 20px;

	/*flex布局（作用于容器）*/
	display: flex;

	/*水平居中（作用于容器）*/
	justify-content: center;

	/*垂直居中（作用于容器）*/
	align-items: center;
}

.demo img{
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
}

demo：http://demo.qianduanblog.com/2799/1.html

 二、水平响应式列表

实例图：

实例HTML：

1. <div class="demo-wrap">
2. <div class="demo">
3. <div class="item item1">高120px</div>
4. <div class="item item2">高50px</div>
5. <div class="item item3">高140px</div>
6. <div class="item item4">高100px</div>
7. </div>
8. </div>

实例CSS：

1. .demo-wrap{
2. border: 2px solid #ddd;
3. background: #f5f5f5;
4. padding: 6px;
5. }
7. .demo{
8. width: 100%;
10. /*flex布局（作用于容器）*/
11. display: flex;
13. /*两端对齐（作用于容器）*/
14. justify-content: space-between;
15. }
17. .demo .item{
18. width: 100px;
19. background: #ffd;
20. color: #C90000;
21. font-size: 20px;
22. text-align: center;
23. line-height: 50px;
24. }
26. .demo .item1{
27. height: 120px;
28. }
30. .demo .item2{
31. height: 50px;
32. }
34. .demo .item3{
35. height: 140px;
36. }
38. .demo .item4{
39. height: 100px;
40. }

demo：http://demo.qianduanblog.com/2799/2.html

三、水平响应式列表底端对齐

和上个例子差不多，只是增加了底端对齐的的特性。

只是修改了容器的样式：

1. .demo{
2. width: 100%;
4. /*flex布局（作用于容器）*/
5. display: flex;
7. /*两端对齐（作用于容器）*/
8. justify-content: space-around;
10. /*侧轴方向对齐方式（作用于容器）*/
11. align-items: flex-end;
12. }

demo：http://demo.qianduanblog.com/2799/3.html

四、多行响应式布局

宽屏：

中屏：

窄屏：

HTML代码：

1. <div class="demo-wrap">
2. <div class="demo">
3. <div class="item"></div>
4. <div class="item"></div>
5. <div class="item"></div>
6. <div class="item"></div>
7. <div class="item"></div>
8. <div class="item"></div>
9. <div class="item"></div>
10. <div class="item"></div>
11. </div>
12. </div>

CSS代码：

1. .demo-wrap{
2. border: 2px solid #ddd;
3. background: #f5f5f5;
4. padding: 6px;
5. }
7. .demo{
8. width: 100%;
10. /*flex布局（作用于容器）*/
11. display: flex;
13. /*两端对齐（作用于容器）*/
14. justify-content: space-around;
16. /*侧轴方向对齐方式（作用于容器）*/
17. align-items: flex-end;
19. /*换行（作用于容器）*/
20. flex-wrap: wrap;
21. }
23. .demo .item{
24. width: 300px;
25. height: 50px;
26. background: #444;
27. margin-bottom: 20px;
28. }

demo：http://demo.qianduanblog.com/2799/4.html

五、左固定右自适应等高布局

演示截图：

HTML：

1. <div class="demo">
2. <div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
3. <div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div>
4. </div>

CSS：

1. .demo{
2. /*flex布局（作用于容器）*/
3. display: flex;
5. /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
6. /*align-items: stretch;*/
7. }
9. .demo .left{
10. /*左边固定宽度，必须设置其最小宽度和最大宽度*/
11. width: 100px;
12. min-width: 100px;
13. max-width: 100px;
15. /*高度*分配*/
16. height: auto;
17. background: #B4D3F7;
19. /*空白区域分配比例为0（作用于项目）*/
20. flex-grow: 0;
21. }
23. .demo .right{
24. margin-left: 10px;
25. width: auto;
26. height: 200px;
27. background: #F7E8B4;
29. /*空白区域分配比例为1（作用于项目）
30. 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
31. 左边成固定的宽度，右边为自适应宽度*/
32. flex-grow: 1;
33. }

demo：http://demo.qianduanblog.com/2799/5.html

六、左右固定中间自适应宽度底部对齐布局

上面的例子是左右布局的，相比较而言，双栏布局会做了，那么三栏布局也就不是问题了。先看实例图：

HTML：

1. <div class="demo">
2. <div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
3. <div class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px</div>
4. <div class="right">右边固定宽度为150px，这里设置了高度为auto</div>
5. </div>

CSS：

1. .demo{
2. /*flex布局（作用于容器）*/
3. display: flex;
5. /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/
6. align-items: flex-end;
7. }
9. .demo .left{
10. /*左边固定宽度，必须设置其最小宽度和最大宽度*/
11. width: 100px;
12. min-width: 100px;
13. max-width: 100px;
15. /*高度*分配*/
16. height: auto;
17. background: #B4D3F7;
19. /*空白区域分配比例为0（作用于项目）*/
20. flex-grow: 0;
21. }
23. .demo .center{
24. margin: 0 10px;
25. width: auto;
26. height: 200px;
27. background: #F7E8B4;
29. /*空白区域分配比例为1（作用于项目）
30. 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
31. 左边成固定的宽度，右边为自适应宽度*/
32. flex-grow: 1;
33. }
35. .demo .right{
36. /*右边固定宽度，必须设置其最小宽度和最大宽度*/
37. width: 150px;
38. min-width: 150px;
39. max-width: 150px;
41. /*高度*分配*/
42. height: auto;
43. background: #CBFFD2;
45. /*空白区域分配比例为0（作用于项目）*/
46. flex-grow: 0;
47. }

demo：http://demo.qianduanblog.com/2799/6.html

备注： 支持safari浏览器需要写上   display: -webkit-flex; /* Safari */