css3 flex流动自适应响应式布局实例2

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

一、图片自适应居中

实例图：



实例HTML：

<div class="demo">
<img src="http://dummyimage.com/100x100" alt="">
</div>

<div class="demo">
<img class="" src="http://dummyimage.com/200x100" alt="">
</div>

<div class="demo">
<img src="http://dummyimage.com/100x200" alt="">
</div>

<div class="demo">
<img src="http://dummyimage.com/200x200" alt="">
</div>

<div class="demo">

4000
<img src="http://dummyimage.com/50x50" 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

原文地址：http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html