码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2017-03-13 11:11:58      阅读：408      评论：0      收藏：0      [点我收藏+]

标签：lock   asc   add   script   alt   ems   20px   微软   -name   

转自：http://www.tuicool.com/articles/auEbMzU   感谢他的分享，

一、图片自适应居中

实例图：

技术分享

实例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">
	<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;
}

 

二、水平响应式列表

实例图：

技术分享

实例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{
	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;
}

 

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

演示截图：

技术分享

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;
}

 

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

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

技术分享

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;
}

 

上次简要的说了一些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">
	<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

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

标签：lock   asc   add   script   alt   ems   20px   微软   -name   

原文地址：http://www.cnblogs.com/ghfjj/p/6541666.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！