上次简要的说了一些css3中flex的相关概念（详细： css学习16：css3 flex流动自适应响应式布局设计 ），这次继续说下css3的flex，简单的举几个实例。
一、图片自适应居中
实例图：
实例HTML：
登录后复制
实例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：
高120px高50px高140px高100px
登录后复制
实例CSS：
.demo-wrap{ border: 2px solid #ddd; background: #f5f5f5; padding: 6px;}.demo{ width: 100%; /*flex布局（作用于容器）*/ display: flex; /*两端对齐（作用于容器）*/ justify-content: space-between;}.demo .item{ width: 100px; background: #ffd; color: #C90000; font-size: 20px; text-align: center; line-height: 50px;}.demo .item1{ height: 120px;}.demo .item2{ height: 50px;}.demo .item3{ height: 140px;}.demo .item4{ height: 100px;}登录后复制
demo： http://demo.qianduanblog.com/2799/2.html
三、水平响应式列表底端对齐
和上个例子差不多，只是增加了底端对齐的的特性。
只是修改了容器的样式：
.demo{ width: 100%; /*flex布局（作用于容器）*/ display: flex; /*两端对齐（作用于容器）*/ justify-content: space-around; /*侧轴方向对齐方式（作用于容器）*/ align-items: flex-end;}登录后复制
demo： http://demo.qianduanblog.com/2799/3.html
四、多行响应式布局
宽屏：
中屏：
窄屏：
HTML代码：
登录后复制
CSS代码：
.demo-wrap{ border: 2px solid #ddd; background: #f5f5f5; padding: 6px;}.demo{ width: 100%; /*flex布局（作用于容器）*/ display: flex; /*两端对齐（作用于容器）*/ justify-content: space-around; /*侧轴方向对齐方式（作用于容器）*/ align-items: flex-end; /*换行（作用于容器）*/ flex-wrap: wrap;}.demo .item{ width: 300px; height: 50px; background: #444; margin-bottom: 20px;}登录后复制
demo： http://demo.qianduanblog.com/2799/4.html
五、左固定右自适应等高布局
演示截图：
HTML：
左边固定宽度为100px，这里设置了高度为auto右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px
登录后复制
CSS：
.demo{ /*flex布局（作用于容器）*/ display: flex; /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/ /*align-items: stretch;*/}.demo .left{ /*左边固定宽度，必须设置其最小宽度和最大宽度*/ width: 100px; min-width: 100px; max-width: 100px; /*高度自由分配*/ height: auto; background: #B4D3F7; /*空白区域分配比例为0（作用于项目）*/ flex-grow: 0;}.demo .right{ margin-left: 10px; width: auto; height: 200px; background: #F7E8B4; /*空白区域分配比例为1（作用于项目） 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域， 左边成固定的宽度，右边为自适应宽度*/ flex-grow: 1;}登录后复制
demo： http://demo.qianduanblog.com/2799/5.html
六、左右固定中间自适应宽度底部对齐布局
上面的例子是左右布局的，相比较而言，双栏布局会做了，那么三栏布局也就不是问题了。先看实例图：
HTML：
左边固定宽度为100px，这里设置了高度为auto中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px右边固定宽度为150px，这里设置了高度为auto
登录后复制
CSS：
.demo{ /*flex布局（作用于容器）*/ display: flex; /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/ align-items: flex-end;}.demo .left{ /*左边固定宽度，必须设置其最小宽度和最大宽度*/ width: 100px; min-width: 100px; max-width: 100px; /*高度自由分配*/ height: auto; background: #B4D3F7; /*空白区域分配比例为0（作用于项目）*/ flex-grow: 0;}.demo .center{ margin: 0 10px; width: auto; height: 200px; background: #F7E8B4; /*空白区域分配比例为1（作用于项目） 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域， 左边成固定的宽度，右边为自适应宽度*/ flex-grow: 1;}.demo .right{ /*右边固定宽度，必须设置其最小宽度和最大宽度*/ width: 150px; min-width: 150px; max-width: 150px; /*高度自由分配*/ height: auto; background: #CBFFD2; /*空白区域分配比例为0（作用于项目）*/ flex-grow: 0;}登录后复制
demo： http://demo.qianduanblog.com/2799/6.html