css3 flex流动自适应响应式布局实例_html/css_WEB-ITnose

上次简要的说了一些css3中flex的相关概念（详细： css学习16：css3 flex流动自适应响应式布局设计 ），这次继续说下css3的flex，简单的举几个实例。

一、图片自适应居中

实例图：

实例HTML：

<div class="demo">    <img src="/static/imghw/default1.png"  data-src="http://dummyimage.com/100x100"  class="lazy" alt=""></div><div class="demo"> <img src="/static/imghw/default1.png"  data-src="http://dummyimage.com/200x100"  class="lazy"  class="" alt=""></div><div class="demo">   <img src="/static/imghw/default1.png"  data-src="http://dummyimage.com/100x200"  class="lazy" alt=""></div><div class="demo"> <img src="/static/imghw/default1.png"  data-src="http://dummyimage.com/200x200"  class="lazy" alt=""></div><div class="demo"> <img src="/static/imghw/default1.png"  data-src="http://dummyimage.com/50x50"  class="lazy" alt=""></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：

<div class="demo-wrap">   <div class="demo">        <div class="item item1">高120px</div>        <div class="item item2">高50px</div>     <div class="item item3">高140px</div>        <div class="item item4">高100px</div>    </div></div>

实例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代码：

<div class="demo-wrap">   <div class="demo">        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>    </div></div>

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：

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

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：

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

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