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

转自：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

时间： 2024-10-10 17:36:04

css3 flex流动自适应响应式布局实例 转的相关文章

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

http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html

css3 flex流动自适应响应式布局样式类

1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联网上关于flex流动布局的文章很少,搜索关于flex的文章,大部分还介绍的是旧的知识点,显然已经不符合当前的w3c标准了,要想了解flex的相关内容,可以参考http://qianduanblog.com/2549.html.并且,支持flex的浏览器也很少,只有谷歌浏览器完全支持,其他低版本的we

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局: html5文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width,initial-scale=1"> <title>i

关于css3媒体查询和响应式布局

响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的.该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的.而在最高的或最小的屏幕上,侧边栏很可能不再是可用的 UI 组件. 有了媒体查询,您就可以编写 CSS,自动将设计更改为提供不同屏幕大小的最佳 UI 体验. 媒体查询 从 CSS

自适应响应式布局-实现原理

1.添加viewport元标签: <meta name="viewport" content="width=device-width, initial-scale=1" /> //width=device-width:网页宽度默认为设备宽度,initial-scale=1:初始缩放比例为1,即页面大小占屏幕的100%. 2.区块设置为浮动定位(float),width设置为百分比或者auto. 3.选择性加载css文件: 1).网页文件加载:当屏幕最大到

响应式布局实例操作

js *{ margin: 0px; padding: 0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: aquam

CSS响应式布局实例

<style type="text/css">        body{            margin:0 auto;            min-width:1366px;        }        a{            text-decoration:none;            color:black;        }        a:hover{            color:orange;        }        a:vis

css3响应式布局

css3的新特性响应式布局,通过@media screen and (min-width: ) and (max-width: ) {}:来实现页面的响应式设计,来适应不同的终端.需在头部添加:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">. 1.适应手机端: 例如: @media scree

Demo —— 响应式布局

响应式布局实例演示 What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过. 优点:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题. 缺点:兼容各种设备工作量大,效率低下:代码累赘,